变量跟踪用户尝试次数不会更新

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事件发生了两次，然后在第三个答案上发生了三次，依此类推。 这意味着第一次单击结果是正确的，但随后的其他单击结果是不正确的，并且一定是导致错误的原因。

您仅应侦听该事件一次，该事件使用的变量会发生变化，这应该足够。 抱歉，目前我无法为您修复代码。