Javascript 递增计数器 onclick 事件

Question

我知道这可能很简单，但我无法从木材自动取款机看到这棵树。请问你能帮忙吗？我有一个初始值为 1 的变量，我想在用户每次单击按钮时将其增加 1。我有这个代码：let counter = 0;dPadRight.addEventListener("click", function increment() {    counter++;});console.log(counter);

Answer 1

我们没有您的 html 标记，因此下面我刚刚创建了一个 ID 为“dPadRight”的 div 来添加侦听器。然后我在 javascript 代码的变量中引用了它。我假设您已经在做类似的事情来拥有一个名为“dPadRight”的变量。

根据您描述您需要“使用[计数器]做其他事情”的评论，我添加了另一个标识为“otherPad”的“pad”。“dPadRight”可以用来增加计数器。“otherPad”可以用来对计数器做一些事情。在下面的代码中，我只是记录它。

这里的教训是，如果你想在计数器递增之后使用它——好吧——那么你就不能在主要的 javascript 主体中引用它，因为那是在它有机会递增之前。

let dPadRight = document.querySelector('#dPadRight');

let otherPad = document.querySelector('#otherPad');

let counter = 0;

dPadRight.addEventListener("click", () => {

    counter++;

});

otherPad.addEventListener("click", () => {

    console.log(counter);

});

<div id="dPadRight">

   click to increment counter

</div>

<br/>

<div id="otherPad">

   click to log counter

</div>

Answer 2

尝试这个

let counter = 1;

let dPadRight = document.getElementById('dPadRight');

dPadRight.addEventListener("click", function() {

   console.log(counter);

   counter++;

   if(counter > 5){

    // just to show that counter is available outside the annonymous 

    // function

     let bla = getCounterValue();

      console.log("Bla Value " + bla);

       }

 

}

);

function getCounterValue(){

   return counter;

}

<button id="dPadRight">Increment Me </button>