為何我的邊框盒的顏色無法改變？

Question

我需要為隨機使用者建立登入表單，當密碼不正確時，密碼框需要變成紅色（border-color），當密碼正確時，需要變成綠色。你能幫我用Javascript程式碼嗎？如果我有任何錯誤，請原諒我的英文。謝謝。

我嘗試了這個，但顏色沒有改變。

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" class="loginForm">
  <h1>登入</h1>
  <input id="email" type="text" class="email" placeholder="電子郵件或使用者名稱">
  <input onkeyup="loginOnEnter(event)" id="password" type="password" class="password" placeholder="密碼">
  <p class="errorMessage">*請輸入有效密碼</p>
  <button onclick="login()" class="login-btn">登入</button>
</div>

Answer 1

可能是你的CSS。試試一下：

style.borderColor = 'red';

#