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", () => {&nbsp; &nbsp; counter++;});otherPad.addEventListener("click", () => {&nbsp; &nbsp; console.log(counter);});<div id="dPadRight">&nbsp; &nbsp;click to increment counter</div><br/><div id="otherPad">&nbsp; &nbsp;click to log counter</div>

Answer 2

尝试这个let counter = 1;let dPadRight = document.getElementById('dPadRight');dPadRight.addEventListener("click", function() {&nbsp; &nbsp;console.log(counter);&nbsp; &nbsp;counter++;&nbsp; &nbsp;if(counter > 5){&nbsp; &nbsp; // just to show that counter is available outside the annonymous&nbsp;&nbsp; &nbsp; // function&nbsp; &nbsp; &nbsp;let bla = getCounterValue();&nbsp; &nbsp; &nbsp; console.log("Bla Value " + bla);&nbsp; &nbsp; &nbsp; &nbsp;}&nbsp;});function getCounterValue(){&nbsp; &nbsp;return counter;}<button id="dPadRight">Increment Me </button>