Why does my border-box color do not change-CodePudding

I need to create login form for random user, and when is incorrect password, password box need to be red (border-color), and when it is correct it need to be green. Can you help me with code in Javascript. And sorry for bad English if I make some mistakes :). Thank you.

I try this, and no color changes.

var users = [{
  username: 'new_user',
  password: "123456789",
}]


function login(email, password) {
  var email = document.getElementById("email").value
  var password = document.getElementById("password").value

  for (var user of users) {

    if ((email === user.email || email === user.username) && password === user.password) {
      var block = document.querySelector('.nav');
      block.style.display = "block"
      var errMsg = document.querySelector('.loginForm .errorMessage')
      errMsg.style.display = "none"
      var form = document.querySelector('.loginForm')
      form.style.display = "none"
      var name = document.getElementById("user-name")
      name.innerHTML = user.name;
      loggedUser = user;
      clearValue("email");
      clearValue("password")
    } else {
      var errMsg = document.querySelector('.loginForm .errorMessage')
      errMsg.style.display = "block"
      var passwordBox = document.querySelector(".loginForm input.password")
      passwordBox.style.border.color = "red"
    }
  }
}

<div id="loginForm" >
  <h1>Login</h1>
  <input id="email" type="text"  placeholder="Email or Username">
  <input onkeyup="loginOnEnter(event)" id="password" type="password"  placeholder="Password">
  <p >*please, enter valid password</p>
  <button onclick="login()" >LOG IN</button>
</div>

CodePudding user response：

Might be your CSS. Try:

style.borderColor = 'red';

CodePudding user response：

var users = [{
  username: 'new_user',
  password: "123456789",
}]


function login(email, password) {
  var email = document.getElementById("email").value
  var password = document.getElementById("password").value

  for (var user of users) {

    if ((email === user.email || email === user.username) && password === user.password) {
      document.getElementById("email").style.border = "thick solid #008000";
      document.getElementById("password").style.border = "thick solid #008000";
      loggedUser = user;
       document.getElementById("email").value = "";
  document.getElementById("password").value = "";
    } else {
      document.getElementById("email").style.border = "thick solid #FF0000";
      document.getElementById("password").style.border = "thick solid #FF0000";
     
    }
  }
}

<div id="loginForm" >
  <h1>Login</h1>
  <input id="email" type="text"  placeholder="Email or Username">
  <input  id="password" type="password"  placeholder="Password">
  <p >*please, enter valid password</p>
  <button onclick="login()" >LOG IN</button>
</div>

CodePudding user response：

Use borderColor instead of border.color

      function login(email, password) {
        var email = document.getElementById("email").value;
        var password = document.getElementById("password").value;

        for (var user of users) {
          if (
            (email === user.email || email === user.username) &&
            password === user.password
          ) {
            var block = document.querySelector(".nav");
            block.style.display = "block";
            var errMsg = document.querySelector(".loginForm .errorMessage");
            errMsg.style.display = "none";
            var form = document.querySelector(".loginForm");
            form.style.display = "none";
            var name = document.getElementById("user-name");
            name.innerHTML = user.name;
            loggedUser = user;
            clearValue("email");
            clearValue("password");
          } else {
            var errMsg = document.querySelector(".loginForm .errorMessage");
            errMsg.style.display = "block";
            var passwordBox = document.querySelector(
              ".loginForm input.password"
            );
            //HERE USE borderColor
            passwordBox.style.borderColor = "red";
          }
        }
      }