时间戳

首页 > 解决方案 > 使用 addEventListener 更新/增加 Javascript 中的计数器

javascript - 使用 addEventListener 更新/增加 Javascript 中的计数器

问题描述

简单的问题 - 我不太明白为什么当我使用事件监听器单击提交按钮（输入类型提交）时我的计数器变量没有更新。其余的代码都很好，我只想知道为什么我的“counter++”在单击按钮时没有将计数器值加 1。

let counter = 0;
submitButton.addEventListener('click', function() {
    counter++;
    -----FEEL FREE TO IGNORE THE CODE BELOW THIS----
    let captureInput = document.getElementById('primaryGuess');
    storeGuess(captureInput.value);
    const newLi = document.createElement("LI");
    const LiContent = document.createTextNode(captureInput.value);
    newLi.appendChild(LiContent);
    listOfPriorGuesses.appendChild(newLi);
    arrayOfGuesses.forEach((currNum) => {
        if (parseInt(currNum) === randomNumber) {
            gameTitle.innerText = "YOU WIN!!!"
            gameTitle.style.color = "green"
            captureInput.value = "Click Play Again!"
        } else if(parseInt(currNum) < randomNumber) {
            captureInput.value = "Guess Higher!"
        } else if(parseInt(currNum) > randomNumber) {
            captureInput.value = "Guess Lower!"
        }
    })
})

标签： javascript

解决方案

它应该工作。请参阅下面的最小代码。如果您input type='button'在表单中使用，则需要使用，e.preventDefault()否则表单将被提交。可能是你有这种情况。您也可以type='button'在不需要的情况下使用e.preventDefault();

let counter = 0;
let submitButton = document.getElementById('submitButton');

let inputSubmitButton = document.getElementById('inputSubmit');

submitButton.addEventListener('click', function() {
  counter++;
  console.log(counter);
});


inputSubmitButton.addEventListener('click', function(e) {
  e.preventDefault();
  counter++;
  console.log(counter);
});
<button id='submitButton'> Button </button>


<form>
  <input id='inputSubmit' type="submit" value="Submit button" />
</form>

推荐阅读