如何檢查用戶的輸入是否與數學 function 結果匹配？

Question

我正在構建一個游戲，它為網頁上的用戶創建隨機數學問題。 我需要檢查用戶的輸入（他們的答案）是否與隨機 function 的結果相匹配。 單擊“新問題”按鈕時，我有四個隨機調用的函數。 我想通過在頁面上顯示“正確”或“不正確”來查看用戶的輸入是否與 function 結果匹配。 有人有什么想法嗎？ 我對 JS 很陌生，我不知道用谷歌搜索什么，但我願意查一下。 有一些方向。

 const btn = document.querySelector('#start') const randomFunc = [ multiplication, division, addition, subtraction, ] btn.addEventListener( 'click', function () { randomFunc[Math.floor(Math.random() * randomFunc.length)](); } ) function multiplication() { let num1 = Math.floor(Math.random() * 13); let num2 = Math.floor(Math.random() * 13); let problemResult = num1 * num2; console.log(num1, '*', num2, '=', problemResult); document.getElementById('mathProblem').innerHTML = (`${num1} * ${num2} =`); } function division() { let num1 = Math.floor(Math.random() * 13); let num2 = Math.floor(Math.random() * 12) + 1; let problemResult = (num1 * num2) / num2; console.log(num1 * num2, '/', num2, '=', problemResult); document.getElementById('mathProblem').innerHTML = (`${num1 * num2} / ${num2} =`); } function addition() { let num1 = Math.floor(Math.random() * 13); let num2 = Math.floor(Math.random() * 13); let problemResult = num1 + num2; console.log(num1,'+',num2,'=',problemResult); document.getElementById('mathProblem').innerHTML = (`${num1} + ${num2} =`); } function subtraction() { let num1 = Math.floor(Math.random() * 13); let num2 = Math.floor(Math.random() * 13); let numList = [num1, num2]; numList.sort(function (a, b) { return a - b }); let problemResult = numList[1] - numList[0]; console.log(numList[1], '-', numList[0], '=', problemResult); document.getElementById('mathProblem').innerHTML = (`${numList[1]} - ${numList[0]} =`); }

 <div> <button id="start" type="button" class="btn btn-primary btn-lg">New Problem</button> <script src={% static 'js/game_logic.js' %}></script> <p id="mathProblem">Your problem will appear here</p> <form action=""> <input id="user_input" type="text" placeholder="Type your answer here"> </form> </div>

Answer 1

您需要讓您的函數返回problemResult ，存儲它，然后在用戶輸入時將其與用戶輸入進行比較。

目前，您根本沒有在聽用戶輸入。 您可以通過提交按鈕（即用戶完成后點擊按鈕）或者我們可以在他們輸入數據時進行監聽。 讓我們做后者：

btn.addEventListener('click', () => {
    let result = randomFunc[Math.floor(Math.random() * randomFunc.length)]();
    document.querySelector('#user_input').addEventListener('input', evt => {
        if (result.toString() === evt.target.value) {
            /* correct! do something here */
        } else {
            /* not correct yet... */
        }
    });
})

請注意我們如何將result轉換為字符串，因此我們將蘋果與蘋果與用戶輸入（來自字段值，將始終是字符串）進行比較。

不要忘記調整函數以返回problemResult 。

Answer 2

如果全局聲明“problemResult”變量，並從其他聲明中刪除“let”，則可以在其他地方訪問該值。 在此示例中，我添加了一個用於檢查答案的按鈕：

 const btn = document.querySelector('#start') const randomFunc = [ multiplication, division, addition, subtraction, ] var problemResult; //declared globally btn.addEventListener( 'click', function () { randomFunc[Math.floor(Math.random() * randomFunc.length)](); } ) function multiplication() { let num1 = Math.floor(Math.random() * 13); let num2 = Math.floor(Math.random() * 13); problemResult = num1 * num2; // "let" trimmed console.log(num1, '*', num2, '=', problemResult); document.getElementById('mathProblem').innerHTML = (`${num1} * ${num2} =`); } function division() { let num1 = Math.floor(Math.random() * 13); let num2 = Math.floor(Math.random() * 12) + 1; problemResult = (num1 * num2) / num2; //"let" trimmed console.log(num1 * num2, '/', num2, '=', problemResult); document.getElementById('mathProblem').innerHTML = (`${num1 * num2} / ${num2} =`); } function addition() { let num1 = Math.floor(Math.random() * 13); let num2 = Math.floor(Math.random() * 13); problemResult = num1 + num2; //"let" trimmed console.log(num1,'+',num2,'=',problemResult); document.getElementById('mathProblem').innerHTML = (`${num1} + ${num2} =`); } function subtraction() { let num1 = Math.floor(Math.random() * 13); let num2 = Math.floor(Math.random() * 13); let numList = [num1, num2]; numList.sort(function (a, b) { return a - b }); problemResult = numList[1] - numList[0]; //"let" trimmed console.log(numList[1], '-', numList[0], '=', problemResult); document.getElementById('mathProblem').innerHTML = (`${numList[1]} - ${numList[0]} =`); }

 <div> <button id="start" type="button" class="btn btn-primary btn-lg">New Problem</button> <p id="mathProblem">Your problem will appear here</p> <script src={% static 'js/game_logic.js' %}></script> <form action=""> <input id="user_input" type="text" placeholder="Type your answer here"> </form> <button onclick="console.log(document.getElementById('user_input').value == problemResult? 'Correct': 'Incorrect')">Check</button> </div>

Answer 3

您為用戶輸入答案的元素創建了 class 或 div。 創建一個變量來存儲用戶輸入的值，然后使用if()語句顯示所需的結果：

var input= document.getElementById("user_input");
if(input== problemresult){
    alert(correct); 
} else {
    alert(incorrect);
}