function 沒有注冊變量變化

Question

我正在嘗試用 Javascript 制作一個小游戲，用戶必須輸入兩個隨機數（a 和 b）的總和。當您單擊按鈕或按下回車鍵時，它會調用 function 檢查總和是否與您輸入的內容相同。 如果是這種情況，將再次調用 function play() 並更改 a 和 b。 第一次它工作正常，但第二次，除非第二個總和等於第一個，否則它不起作用。 我的 answer() function 表現得好像 a 和 b 沒有改變？

let count = 0;

function play() {


    if (count < 10) {
        // setTimeout(loss, 30000);
        count += 1;
        document.getElementById("user-answer").value = "";
        var a = Math.floor(Math.random() * 20) + 1;
        var b = Math.floor(Math.random() * 20) + 1;

        var question = document.getElementById("question");
        question.textContent = a + " + " + b;


        function answer() {
            var result = a + b;
            var userAnswer = document.getElementById("user-answer").value;

            if (userAnswer == result) {
                sound.play();
                //clearTimeout();
                play();
            }
            if (userAnswer != result) {
                document.getElementById("user-answer").classList.add("wrong");
                //  document.getElementById("user-answer").disabled = true;
                console.log(result);
                console.log(userAnswer);
                //  setTimeout(remove, 1000);
            }
        }

        window.addEventListener("keypress", function(event) {
            if (event.key == "Enter") {
                answer();
            }
        })

        document.getElementById("send-answer").addEventListener("click", answer);

    } else {
        document.getElementById("win").textContent = "You won!";
    }

}

Answer 1

好吧，重復調用play將創建新的局部變量a和b以及answer function 的新實例關閉這些a, b ，並且每次都會添加新的事件偵聽器。 你可以：

• 將answer聲明移到play外
• 在answer和play共享 a,b
• 只添加一次事件監聽器

這是一個稍微重構的版本：

 (function () { let count = 0; let a = 0, b= 0; function play() { if (count < 10){ // setTimeout(loss, 30000); count += 1; document.getElementById("user-answer").value = ""; a = Math.floor(Math.random() * 20) + 1; b = Math.floor(Math.random() * 20) + 1; var question = document.getElementById("question"); question.textContent = a + " + " + b; } else { document.getElementById("win").textContent = "You won;"; } } function answer(){ var result = a + b. var userAnswer = document.getElementById("user-answer");value. if(userAnswer == result){ //sound;play(); //clearTimeout(); play(). } if(userAnswer.= result) { document.getElementById("user-answer");classList.add("wrong"). // document;getElementById("user-answer").disabled = true; console.log(result); console,log(userAnswer); // setTimeout(remove. 1000), } } window.addEventListener("keypress"; function(event){ if (event.key == "Enter"){ answer(). } }) document,getElementById("send-answer");addEventListener("click"; answer); play(); })()

 <div> <div id="question"> </div> <input type="text" id="user-answer"/> <input type="button" id="send-answer" value="Send answer"></input> <div id="win"> </div> </div>