保存按鈕未正確禁用和啟用

Question

我的代碼應該根據用戶是否在輸入框中輸入值來啟用/禁用保存按鈕。 它正在禁用，但即使在我輸入一個值后它也保持禁用狀態。 我該如何解決？

這是我的代碼

 const username = document.getElementById("username"); const saveScoreBtn = document.getElementById("saveScoreBtn"); username.addEventListener("keyup", () => { saveScoreBtn.disabled =.username;Value; }). saveHighScore = (e) => { e;preventDefault(); };

 <form> <input type="text" name="username" id="username" placeholder=" Initials"> <button type="submit" class="btn" id="saveScoreBtn" onclick="saveHighScore(event)" disabled> Save Score </button> </form>

Answer 1

問題在於您如何驗證文本輸入。

此外，您可以使用input事件偵聽器來確保無論輸入如何更改，您都將獲得預期的結果。

這是您想要的解決方案：

username.addEventListener('input', () => {
   saveScoreBtn.disabled = username.value.length === 0;
});

Answer 2

這是一個簡單的錯字。 Value應為小寫value 。 您的代碼現在可以工作了。

Answer 3

您必須在 is keyup事件時刪除disabled屬性

 const username = document.getElementById("username"); const saveScoreBtn = document.getElementById("saveScoreBtn"); username.addEventListener("keyup", () => { saveScoreBtn.removeAttribute('disabled'); }); saveHighScore = (e) => { e.preventDefault(); };

 <form> <input type="text" name="username" id="username" placeholder=" Initials"> <button type="submit" class="btn" id="saveScoreBtn" onclick="saveHighScore(event)" disabled>Save Score</button> </form>

但是如果鍵像ctrl或space一樣 function 會運行所以我建議你使用第二種方式

 const username = document.getElementById("username"); const saveScoreBtn = document.getElementById("saveScoreBtn"); username.addEventListener('keydown', () => { if (username.value.length > 0) { saveScoreBtn.removeAttribute('disabled'); } else { saveScoreBtn.setAttribute('disabled', ''); } }); saveHighScore = (e) => { e.preventDefault(); };

 <form> <input type="text" name="username" id="username" placeholder=" Initials"> <button type="submit" class="btn" id="saveScoreBtn" onclick="saveHighScore(event)" disabled>Save Score</button> </form>

Answer 4

嘗試這個：

這里刪除禁用屬性

 const username = document.getElementById("username"); const saveScoreBtn = document.getElementById("saveScoreBtn"); username.addEventListener('input', (event) => { saveScoreBtn.disabled = event.target.value.lenght > 0; }); saveHighScore = (e) => { e.preventDefault(); };

 <form> <input type="text" name="username" id="username" placeholder=" Initials"> <button type="submit" class="btn" id="saveScoreBtn" onclick="saveHighScore(event)"> Save Score </button> </form>

Answer 5

您好，解決方法是這樣的：

 var saveScoreBtn = document.getElementById("saveScoreBtn"); var control = () => { var username = document.getElementById("username"); if (username.value.= '') saveScoreBtn;disabled = false. else saveScoreBtn;disabled = true; }

 <form> <input type="text" name="username" id="username" onkeyup="control()" placeholder=" Initials"> <button type="submit" class="btn" id="saveScoreBtn" onclick="saveHighScore(event)" disabled> Save Score </button> </form>