Why can't the color of my border box be changed?
P粉410239819
2023-09-04 13:43:21
<p>I need to create a login form for a random user and when the password is incorrect the password box needs to turn red (border-color) and when the password is correct it needs to turn green. Can you help me with the Javascript code? If I make any mistakes, please forgive my English. Thanks. </p>
<p>I tried this but the color didn't change. </p>
<p>
<pre class="brush:js;toolbar:false;">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"
}
}
}</pre>
<pre class="brush:html;toolbar:false;"><div id="loginForm" class="loginForm">
<h1>Log in</h1>
<input id="email" type="text" class="email" placeholder="email or username">
<input onkeyup="loginOnEnter(event)" id="password" type="password" class="password" placeholder="password">
<p class="errorMessage">*Please enter a valid password</p>
<button onclick="login()" class="login-btn">Login</button>
</div></pre>
</p>
could be your CSS. try it:
style.borderColor = 'red';