變量跟蹤用戶嘗試次數不會更新

Question

我正在做一個問答游戲，並且有一段時間了，我只是想不出自己在做什么錯。 詢問任何問題，如果您對我的解釋感到困惑，我將監視該帖子

如何重現問題-鍵入屏幕上顯示的名稱，直到看到“ Game over bro！”。 -問題：當我在輸入字段中鍵入名稱並單擊“答案”以檢查輸入字段值是否與從API檢索到的名稱匹配時，會出現一個變量（無功嘗試= 5），該變量跟蹤用戶的訪問次數嘗試了該問題，但是當答案正確時，此變量（嘗試）將其值減小一，僅在答案錯誤時才執行該操作。

另外，請告訴我您對JS代碼的看法，這是不好的代碼嗎？ 我問是因為newReq函數中的代碼我寫了兩次，一次是在頁面加載時加載並顯示從API檢索的數據，newReq函數中的代碼是在單擊“新字符”按鈕時加載了新字符。一直在考慮DRY，但是我不確定如何在不重寫代碼的情況下加載新字符

 var attemptsPara = document.querySelector("#attempts"), attempts = 5, scorePara = document.querySelector("#score"), score = 0, feedBackDiv = document.querySelector("#feedBack"), newCharacterBtn = document.querySelector("#newCharacter"), answerBtn = document.querySelector("#answer"), input = document.querySelector("input"); scorePara.textContent = `Score is currently: ${score}`; attemptsPara.textContent = `${attempts} attempts remaining`; var feedBackText = document.createElement("p"); var characterPara = document.querySelector("#character"); //click new character button to load new character // newCharacterBtn.addEventListener("click", () => { // answerBtn.disabled = false; // attempts = 5; // attemptsPara.textContent = `${attempts} attempts remaining`; // }); //function that displays retrieved data to the DOM function displayCharacters(info) { let englishName = info.attributes.name; characterPara.textContent = `This is the character's name: ${englishName}`; console.log(englishName, randomNumber); } //load new character var randomNumber = Math.round(Math.random() * 100 + 2); var request = new XMLHttpRequest(); request.open( "GET", "https://kitsu.io/api/edge/characters/" + randomNumber, true ); request.send(); request.onload = function() { var data = JSON.parse(this.response); var info = data.data; displayCharacters(info); //checks if the input value matches name retrieved answerBtn.addEventListener("click", () => { let englishName = info.attributes.name; if (input.value === englishName) { feedBackText.textContent = `${input.value} is correct`; feedBackDiv.append(feedBackText); feedBackDiv.style.backgroundColor = "green"; feedBackDiv.style.display = "block"; setTimeout(() => { feedBackDiv.style.display = "none"; }, 3000); score = score + 5; scorePara.textContent = `Score is currently: ${score}`; attempts = 5; attemptsPara.textContent = `${attempts} attempts remaining`; input.value = ""; newReq(); //call function to load and display new character } else { feedBackText.textContent = `${input.value} is wrong`; feedBackDiv.append(feedBackText); feedBackDiv.style.backgroundColor = "red"; feedBackDiv.style.display = "block"; input.focus(); setTimeout(() => { feedBackDiv.style.display = "none"; }, 2000); attempts = attempts - 1; attemptsPara.textContent = `${attempts} attempts remaining`; if (attempts <= 0) { answerBtn.disabled = true; attemptsPara.textContent = `Game over bro!`; } } console.log(attempts); //check how many attempts remaining every time answerBtn is clicked }); }; newCharacterBtn.addEventListener("click", newReq); //function to make a new request and display it the information on the DOM,when New character button is clicked function newReq() { rand = randomNumber = Math.round(Math.random() * 100 + 2); var request = new XMLHttpRequest(); request.open( "GET", "https://kitsu.io/api/edge/characters/" + randomNumber, true ); request.send(); request.onload = function() { var data = JSON.parse(this.response); var info = data.data; displayCharacters(info); answerBtn.addEventListener("click", () => { let englishName = info.attributes.name; if (input.value === englishName) { feedBackText.textContent = `${input.value} is correct`; feedBackDiv.append(feedBackText); feedBackDiv.style.backgroundColor = "green"; feedBackDiv.style.display = "block"; //settimeout to hide feedBack div setTimeout(() => { feedBackDiv.style.display = "none"; }, 3000); score = score + 5; scorePara.textContent = `Score is currently: ${score}`; attempts = 5; attemptsPara.textContent = `${attempts} attempts remaining`; input.value = ""; newReq(); } else if (input.value != englishName) { feedBackText.textContent = `${input.value} is wrong`; feedBackDiv.append(feedBackText); feedBackDiv.style.backgroundColor = "red"; feedBackDiv.style.display = "block"; input.focus(); //settimeout to hide feedBack div setTimeout(() => { feedBackDiv.style.display = "none"; }, 2000); attempts = attempts - 1; attemptsPara.textContent = `${attempts} attempts remaining`; if (attempts <= 0) { answerBtn.disabled = true; attemptsPara.textContent = `Game over bro!`; } } }); console.log(attempts); }; } 

 body { margin: 0; padding: 0; background: black; } #imageHolder { height: 560px; width: 1100px; background: #098; margin: 10px auto; } #buttonHolder { /* background: #453; */ width: 160px; margin: 0 auto; } p, h3 { color: yellowgreen; text-align: center; } h3 { text-decoration: underline; } img { width: 100%; height: 100%; } button, input { margin: 10px 10px; border: none; background: #098; display: block; } input { background: white; } /* for the question and awnswer game */ #feedBack { background: #098; height: 120px; width: 320px; margin: 10px auto; display: none; } 

 <p id="score"></p> <p id="character"></p> <input type="text"> <button id="answer">Answer</button> <button id="newCharacter">New Character</button> <p id="attempts"></p> <div id="feedBack"> </div> 

Answer 1

您的問題是answerBtn.addEventListener每次答案返回時都調用answerBtn.addEventListener引起的-這將增加越來越多的偵聽器。

在click事件的開始處添加一個控制台日志，您會看到在第二個答案之后，click事件發生了兩次，然后在第三個答案上發生了三次，依此類推。 這意味着第一次單擊結果是正確的，但隨后的其他單擊結果是不正確的，並且一定是導致錯誤的原因。

您僅應偵聽該事件一次，該事件使用的變量會發生變化，這應該足夠。 抱歉，目前我無法為您修復代碼。