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>