I understand now what you say, if I write something in that user field, and then click on next field, it is like somehow a function is called and resets all the data. If I hit tab and don’t click on next field then it works fine.
yes that is what I was trying to tell you
it looks like openUserInfo
function is called every time you click on that ‘Enter Email Address’ input.
this may be the problem:
const userProfileButton = document.getElementById("userInfo");
userProfileButton.onclick = openUserInfo;
it means that every time you click on userInfo it runs that function
so the fix to this problem is?
use the id of a button there instead of the id of a div, that (“userInfo”)
<div id="userInfo">
<h4>User Profile</h4>
<input type="text" id="txtUsername" required placeholder="Enter Username">
<input type="text" id="txtEmail" required placeholder="Enter Email Address">
<small>Optional</small>
The div and the id are both merged together
maybe this button is where you want to look at? or something near this button
hideElement = (element) => (element.style.display = "none");
showElement = (element) => (element.style.display = "block");
const userConnectButton = document.getElementById("btn-login");
userConnectButton.onclick = login;
const userProfileButton = document.getElementById("userInfo");
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("btn-CloseUserInfo").onclick = () =>
hideElement(userInfo);
document.getElementById("btn-logout").onclick = logout;
document.getElementById("btn-SaveUserInfo").onclick = saveUserInfo;
These are already used
what you expect this code to do?
when you click on the profile button it shows the userinfo on your profile
and where is the profile button in html, what id it has?
<button id="btn-login">Connect Your MetaMask</button>
<button id="btn-profile">Profile</button>
and how is that here it is using “userInfo”?
I fixed the code again after watching the video again, it is still no saving the profile or giving the alert when i checked the console this appeared
MoralisWeb3 = serverUrl = "https://w6j9c9lnnoio.usemoralis.com:2053/server"; //Server url from moralis.io
MoralisWeb3 = appId = "wZsf07rYLfsPudepzTdjvrAsYfgWAQb0BFbnTFJI"; // Application id from moralis.io
async function initializeApp() {
hideElement(userInfo);
await Moralis.start({ serverUrl, appId });
await Moralis.enableWeb3();
currentUser = Moralis.User.current();
if (!currentUser) {
currentUser = await Moralis.Web3.authenticate();
}
}
{
initUser = async () => {
if (await Moralis.User.current()) {
hideElement(userConnectButton);
showElement(userProfileButton);
} else {
showElement(userConnectButton);
hideElement(userProfileButton);
}
};
login = async () => {
try {
await Moralis.Web3.authenticate();
initUser();
} catch (error) {
alert(error);
}
};
logout = async () => {
await Moralis.User.logOut();
hideElement(userInfo);
initUser();
};
openUserInfo = async () => {
user = await Moralis.User.current();
if (user) {
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();
prompt("Changes saved successfully!");
openUserInfo();
}
hideElement = (element) => (element.style.display = "none");
showElement = (element) => (element.style.display = "block");
const userConnectButton = document.getElementById("btn-login");
userConnectButton.onclick = login;
const userProfileButton = document.getElementById("btn-profile");
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("btn-CloseUserInfo").onclick = () =>
hideElement(userInfo);
document.getElementById("btn-logout").onclick = logout;
document.getElementById("btn-SaveUserInfo").onclick = saveUserInfo;
}
initializeApp();
you may have to save the file as I mentioned before
I mean, did you save the avatar first? I don’t see that in your code.
no i did not save it, how to do it?
how to save the avatar img?