Hi guys
I’m trying to get my buttons for my NFT Marketplace to work and I’m struggling with this. Can anyone help me please as I’m new to coding. Ive pasted my HTML and JavaScript below.
Cheers
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Morarables</title>
</head>
<body>
<div>
<button id="btnConnect">Connect Wallet</button>
<button id="btnUserInfo">Profile</button>
</div>
<div Id="UserInfo">
<h4>User Profile</h4>
<input type="text" id="txtUsername" required placeholder="Enter Username">
<input type="text" id="txtEmail" placeholder="Enter Email">
<small>Optional</small>
<img width="50" hieght="50" src="" id="imgAvatar" alt="">
<label for="fileAvatar">Select Avatar</label>
<input type="file" id="fileAvatar">
<button id="btnlogout">Log out</button>
<button id="btnCloseUserInfo">Close</button>
<button id="btnSaveUserInfo">Save</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/web3.min.js"></script>
<script src="https://unpkg.com/moralis/dist/moralis.js"></script>
<script src="main.js"></script>
</body>
</html>
Javascript
Moralis.initialize("xuOLzgsgWfTESSw258bWrBlV7f4diP05wWa1MmUU");
Moralis.serverURL = "https://giwpmltygioj.usemoralis.com:2053/server"
init = async () => {
hideElement(UserInfo);
await Moralis.enableWeb3();
initUser();
}
initUser = async () => {
if (await Moralis.User.current()){
hideElement(userConnectButton);
showElement(userProfileButton);
}else{
showElement(userConnectButton);
hideElement(userProfileButton);
}
}
login = async () => {
try {
await Moralis.authenticate();
initUser();
} catch (error) {
alert(error)
}
}
logout = async () => {
await Moralis.User.logout();
hideElement(userInfo);
initUser();
}
openUserInfo = async () => {
user = await Moralis.User.current();
if(openUserInfo){
const email = user.get('email')
if(email){
userEmailField.value = email;
}else{
userEmailField.value = "";
}
userUsernameField.value = user.get('username')
const userAvatar = user.get(Avatar);
if(userAvatar){
userAvatarImg.src = userAvatar.url();
showElement(userAvatarImg);
}else{
hideElement(userAvatarImg);
}
showElement(UserInfo);
}else{
login();
}
saveUserInfo = async () => {
user.set('email', userEmailField.value);
user.set('username', userUsernameField.value);
if (userAvatarFile.files.length > 0) {
const avatar = new Moralis.File("avatar.jpg", userAvatarFile.Files[0]);
user.set('avatar', avatar);
}
await user.save();
alert("User info saved successfully!");
openUserInfo();
}
hideElement = (element) => element.style.display = "none";
showElement = (element) => element.style.display = "block";
const userConnectButton = document.getElementById("btnConnect");
userConnectButton.onclick = login;
const userProfileButton = document.getElementById("btnUserInfo");
document.getElementById("btnUserInfo").onclick = () => showElement(openUserInfo);
userProfileButton.onclick = openUserInfo;
const UserInfo = document.getElementById("UserInfo");
const userUsernameField = document.getElementById("txtUsername");
const userEmailField = document.getElementById("txtEmail");
const userAvatarImg = document.getElementById("ImgAvatar");
const userAvatarFile = document.getElementById("FileAvatar");
document.getElementById("btnCloseUserInfo").onclick = () => hideElement(UserInfo);
document.getElementById("btnLogout").onclick = logout;
document.getElementById("btnSaveUserInfo").onclick = saveUserInfo;
init()}