Javascript-如何在不同情況下使用相同的onkeydown事件調用不同的函數

Question

我正在嘗試對隨機問題進行簡單測驗。 輸入答案后，用戶可以按Enter鍵檢查他的答案是正確還是錯誤。 在那一刻，文本框將被隱藏。

我希望用戶能夠再次按Enter鍵以繼續下一個問題。 但是，既然已經有一個用該鍵調用的函數，該怎么辦？

這就是我正在使用的：

  var country = ["Italy", "Spain", "Portugal", "France"]; var capital = ["rome", "madrid", "lisbon", "paris"]; var random001 = Math.floor(Math.random() * country.length); document.getElementById("country").innerHTML = country[random001]; function submit001() { var b = input001.value.toLowerCase(); var text; switch (true) { case random001 == 0 && b == capital[0]: case random001 == 1 && b == capital[1]: case random001 == 2 && b == capital[2]: case random001 == 3 && b == capital[3]: text = "Correct!"; hideAndShowDIV(); break; default: text = input001.value.bold() + " is not correct!"; document.getElementById("input001").value = ""; } document.getElementById("answer001").innerHTML = text; } function hideAndShowDIV() { var x = document.getElementById("userInput"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } } function goToNextQuestion() { random001 = Math.floor(Math.random() * country.length); document.getElementById("country").innerHTML = country[random001]; hideAndShowDIV() document.getElementById("input001").focus(); } 

  <p id="message001">What is the capital of <text id="country"></text>?</p> <div id="userInput" style="display:block"> <input type="text" id="input001" autofocus onKeyDown="if(event.keyCode==13) submit001();"> </div> <p id="answer001"></p> 

我要使用Enter鍵調用function goToNextQuestion() 。

Answer 1

一種快速的解決方案是在函數submit001添加任何額外的行，然后再添加任何行：

if (document.getElementById("answer001").textContent === "Correct") {
    goToNextQuestion();
}

然后，在功能gotoNextQuestion ，應確保清除該文本內容（刪除“更正”）。

但是請注意，隱藏input元素時，keydown事件不會在input元素上觸發，因此您應該在文檔上偵聽該事件。

更好的方法是對該狀態使用變量，而不要依賴於HTML文檔中的內容。

這是一個使用addEventListener的實現，而不是在HTML標簽中包含JS代碼。 注意它是如何在文檔級別上偵聽的。 也最好使用事件key屬性而不是keyCode 。

新變量execOnEnter定義了根據“游戲”狀態執行的功能。 在代碼submit001其更改為submit001或goToNextQuestion ：

 var country = ["Italy", "Spain", "Portugal", "France"]; var capital = ["rome", "madrid", "lisbon", "paris"]; var random001 = Math.floor(Math.random() * country.length); document.getElementById("country").textContent = country[random001]; var execOnEnter = submit001; document.addEventListener("keydown", function (e) { if (e.key !== "Enter") return; execOnEnter(); }); function submit001() { var b = input001.value.toLowerCase(); var text; if (b === capital[random001]) { text = "Correct!"; hideAndShowDIV(); execOnEnter = goToNextQuestion; } else { text = input001.value.bold() + " is not correct!"; } document.getElementById("input001").value = ""; document.getElementById("answer001").innerHTML = text; } function hideAndShowDIV() { var x = document.getElementById("userInput"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } } function goToNextQuestion() { document.getElementById("answer001").innerHTML = ""; random001 = Math.floor(Math.random() * country.length); document.getElementById("country").innerHTML = country[random001]; hideAndShowDIV() execOnEnter = submit001; document.getElementById("input001").focus(); } 

 <p id="message001">What is the capital of <text id="country"></text>?</p> <div id="userInput" style="display:block"> <input type="text" id="input001" autofocus> </div> <p id="answer001"></p> 

Answer 2

您可以在submit001()函數內部進行檢查，以檢查userInput控件是否被隱藏，如果是，則直接轉到goToNextQuestion 。

Answer 3

有幾種方法可以做到這一點。 但我建議不要使用這種方法，因為點擊Enter按鈕提交並不直觀。 我建議添加一個“提交”按鈕。 無論您如何嘗試：

 var country = ["Italy", "Spain", "Portugal", "France"]; var capital = ["rome", "madrid", "lisbon", "paris"]; var random001 = Math.floor(Math.random() * country.length); document.getElementById("country").innerHTML = country[random001]; function input001_onKeyDown(e){ if(e.keyCode === 13){ submit001(); } else { clearParagraph(); } } function submit001() { var b = input001.value.toLowerCase(); document.querySelector("#input001").value = '' var text; switch (true) { case random001 == 0 && b == capital[0]: case random001 == 1 && b == capital[1]: case random001 == 2 && b == capital[2]: case random001 == 3 && b == capital[3]: text = "Correct! " + b + " is the capital of " + country[random001]; goToNextQuestion(); break; default: text = b + " is not correct!"; document.getElementById("input001").value = ""; } document.getElementById("answer001").innerHTML = text } function hideAndShowDIV() { var x = document.getElementById("userInput"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } } function goToNextQuestion() { random001 = Math.floor(Math.random() * country.length); document.getElementById("country").innerHTML = country[random001]; document.getElementById("input001").focus(); } function clearParagraph(){ document.querySelector("#answer001").innerHTML = '' } 

  <p id="message001">What is the capital of <text id="country"></text>?</p> <div id="userInput" style="display:block"> <input type="text" id="input001" autofocus onKeyDown="input001_onKeyDown(event)"> </div> <p id="answer001"></p> 

Answer 4

無需贅述（我將不得不了解各種情況下您想要的行為的更多信息…… 例如 ：用戶可以返回上一個問題，更改答案並重新驗證嗎？），我建議某種附加到輸入或與之關聯的指示器（即，在祖先元素上）與輸入相關聯，以跟蹤答案是否已得到驗證。

例如，如果用戶已經按下Enter以檢查該值，則可以使用一個類（例如， class="answer-validated" ）或數據屬性（例如， data-validated="true" ）。 對於類，默認情況下將不存在，“驗證”代碼會將其添加為其邏輯的一部分。 類似地，數據屬性可以默認為“ false”，並在驗證答案時更新為“ true”。

這種方法的好處在於，它允許您直接控制對輸入狀態的跟蹤，並有可能將其重用於其他功能，包括：

• 重置輸入狀態，如果用戶想重新回答，
• 輕松重置所有問題的狀態，而無需刷新/重置頁面
• 根據類的存在或數據屬性的狀態，通過CSS應用視覺差異
• 跟蹤已檢查的答案的數量，並限制驗證的最大數量（即“提交答案之前，您只能檢查3個答案”）
• 等等。

可以從頁面上的其他元素推斷出狀態，但是我認為，管理輸入本身的狀態而不是根據另一個頁面元素的狀態來確定輸入更為有意義。 它更直接，更不容易對其他元素進行更改而影響輸入的功能。