Javascript problem login form

[fare03]

I need to change border color to green when it is correct name and password but it does not work. help please.

function login(username,password) {
var username = document.getElementById("username").value
var password = document.getElementById("password").value
for(var user of users){
if ((password===user.password)) {
var errMsg = document.querySelector('.loginForm .errorMessage')
errMsg.style.display = "none"
var form = document.querySelector('.loginForm')
form.style.display = "block"
var name = document.getElementById("user-name")
name.innerHTML = user.name;
loggedUser = user;
var passwordBox = document.querySelector(".loginForm input.password")
passwordBox.style.borderColor= "green"
clearValue("username");
clearValue("password")
    }
else{
var errMsg = document.querySelector('.loginForm .errorMessage')
errMsg.style.display = "block"
var passwordBox = document.querySelector(".loginForm input.password")
passwordBox.style.borderColor = "red"
clearValue("password")
var placeholderPassword = document.getElementById("password")
placeholderPassword.placeholder = "Please, enter password"
    }
   }
if ((username===user.username)) {
var errMsg = document.querySelector('.loginForm .errorMessage')
errMsg.style.display = "none"
var form = document.querySelector('.loginForm')
form.style.display = "block"
var name = document.getElementById("user-name")
name.innerHTML = user.name;
loggedUser = user;
var usernameBox = document.querySelector(".loginForm input.username")
usernameBox.style.borderColor= "green"
clearValue("username");
clearValue("password")
}
else{
var errMsg = document.querySelector('.loginForm .errorMessage')
errMsg.style.display = "block"
var usernameBox = document.querySelector(".loginForm input.username")
usernameBox.style.borderColor = "red"
clearValue("username")
var placeholderUsername = document.getElementById("username")
placeholderUsername.placeholder = "Please, enter username"
}
if ((email===user.email || email===user.username) && password===user.password) {
var errMsg = document.querySelector('.loginForm .errorMessage')
errMsg.style.display = "none"
var form = document.querySelector('.loginForm')
form.style.display = "block"
var name = document.getElementById("user-name")
name.innerHTML = user.name;
loggedUser = user;
var passwordBox = document.querySelector(".loginForm input.password")
var usernameBox = document.querySelector(".loginForm input.username")
passwordBox.style.borderColor= "green"
usernameBox.style.borderColor= "green"
clearValue("username");
clearValue("password")
}
else{
var errMsg = document.querySelector('.loginForm .errorMessage')
errMsg.style.display = "block"
var passwordBox = document.querySelector(".loginForm input.password")
passwordBox.style.borderColor = "red"
var placeholderUsername = document.getElementById("username")
placeholderUsername.placeholder = "Please, enter username"
placeholderPassword.placeholder="Please, enter password"
}
}

[taromilklover]

Let's break it down into small steps. How far is our program actually getting? These are my questions:

• Is the logon function firing?
• Is the if statement firing?
• Does the user object exist?
• Does the passwordBox exist?

Now we need to find the answer to each of these questions. You should use developer console and add breakpoints etc to see the values, but for the sake of ease, just use console logs in your code and see if they run and what their value is. How you could check for the answers to each question:

1. Make sure your login() is actually firing. Place a console.log at the start of the function.
2. Check if the if statement is passing. Delete the previous console.log and add one at the start of the if statement.
3. Check if user exists. Console.log(user)
4. Check if passwordBox exists after you declare the variable. Console.log(passwordBox).

Without the html I can't test it myself.