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>

Javascript增量计数器onclick事件

Javascript Increment counter onclick event

javascript

counter

addeventlistener