根據輸入禁用按鈕/更改顏色的問題。有什么建議嗎？-有解無憂

我一直在努力處理這段代碼，但找不到我正在犯的錯誤（我猜有很多錯誤）。到目前為止，我使用 querySelector 和 getElementById 進行了嘗試，并且我已經重寫了很多次函式，但到目前為止還沒有運氣。有什么建議嗎？提前致謝。

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" class="input-mail" id="input-mail" onkeyup="changeColor()">
        <p>Password</p>
        <input type="password" placeholder="Password" class="input-password" id="input-password"><br>
    </form>    
        <button class="btn-next" id="btn-next">NEXT</button> 
</body>

uj5u.com熱心網友回復：

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" class="input-mail" id="input-mail">
        <p>Password</p>
        <input type="password" placeholder="Password" class="input-password" id="input-password"><br>
    </form>    
        <button class="btn-next" id="btn-next" disabled>NEXT</button> 
</body>

uj5u.com熱心網友回復：

將以下內容更改為

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

更正了“=”符號以將行從比較更改為分配。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/438944.html

標籤：javascript 功能 dom

上一篇：使用TeXiFy插件在想法中安裝便攜式MiKTeX

下一篇：在JavaScript中添加CSS樣式時，加法賦值運算子是否有效？