Problems making a button disabled/change color depending on the input. Any advice?-CodePudding

I've been tying to work on this code, but can't find the mistakes (and I'm guessing there are many of them) I'm making. So far I tried it using querySelector and getElementById and I've been rewriting the functions quite a few times, but no luck so far. Any advice? Thanks in advance.

const btnNext = document.querySelector(".btn-next");
const logIn = document.querySelector(".btn-login");
const inputMail = document.querySelector(".input-mail");
const inputPassword = document.querySelector(".input-password");

function btnLogIn() {
    if (inputMail.value.length && inputPassword.value.length == 0) {
        btnNext.disabled == true;
    } else {
        btnNext.disabled == false;
    }
}
function changeColor() {
    if (document.getElementById("input-mail") !== "") {
        document.getElementById("btn-next").style.background = "gray";
    } else {
        document.getElementById("btn-next").style.background = "blue";  
    }
}

body{
    margin: auto;
    width:50%;
    padding: 0;
    background-color: #eeeeee;
}
form{
    display: flex;
    flex-direction: column;
}
.btn-next{
    margin-top: .5rem;
    background-color: #949aa6;
    color: white;
    border: none;
    border-radius: 2px;
    padding: 18px 119px 18px 119px; 
    font-size: .8rem;
    font-weight: 600;
}
input{
    width: 16.5rem;
    height: 2rem;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    }

<body>
     <form>
        <p>Email</p>
        <input type="email" placeholder="Email"  id="input-mail" onkeyup="changeColor()">
        <p>Password</p>
        <input type="password" placeholder="Password"  id="input-password"><br>
    </form>    
        <button  id="btn-next">NEXT</button> 
</body>

CodePudding user response：

const btnNext = document.querySelector(".btn-next");
const logIn = document.querySelector(".btn-login");
const inputMail = document.querySelector(".input-mail");
const inputPassword = document.querySelector(".input-password");

inputMail.addEventListener("input", verifyInput);
inputPassword.addEventListener("input", verifyInput);

  function verifyInput() {
    if (
      inputMail.value.trim().length == 0 ||
      inputPassword.value.length == 0
    ) {
      btnNext.disabled = true;
      btnNext.style.backgroundColor = "gray";
    } else {
      btnNext.disabled = false;
      btnNext.style.backgroundColor = "blue";
    }
  }

body{
    margin: auto;
    width:50%;
    padding: 0;
    background-color: #eeeeee;
}
form{
    display: flex;
    flex-direction: column;
}
.btn-next{
    margin-top: .5rem;
    background-color: #949aa6;
    color: white;
    border: none;
    border-radius: 2px;
    padding: 18px 119px 18px 119px; 
    font-size: .8rem;
    font-weight: 600;
}
input{
    width: 16.5rem;
    height: 2rem;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    }

<body>
     <form>
        <p>Email</p>
        <input type="email" placeholder="Email"  id="input-mail">
        <p>Password</p>
        <input type="password" placeholder="Password"  id="input-password"><br>
    </form>    
        <button  id="btn-next" disabled>NEXT</button> 
</body>

CodePudding user response：

Change the following to

function btnLogIn() {
     if (inputMail.value.length && inputPassword.value.length == 0) {
         btnNext.disabled = true;
     } else {
          btnNext.disabled = false;
   }
}

corrected '=' signs to change line from comparison to allocation.