为计数器创建重置按钮答案

【问题标题】：Create Reset button for a counter为计数器创建重置按钮
【发布时间】：2020-10-03 05:38:18
【问题描述】：

我有这个柜台。它是一个使用 Javascript Closure 的计数器。你能帮我一个重置按钮吗？如果可以的话，对这种类型的“计数器”代码，而不是另一个......

HTML 代码

<button type="button" onclick="geo()">Count!</button>
<p id="count">0</p>

JAVASCRIPT 代码

<script>
  var count= (function () {
  var nr = 0;
  return function () {nr+= 1; return nr;}
  })();

  function geo(){
      document.getElementById("count").innerHTML = count();
  }
</script>

【问题讨论】：

欢迎来到 StackOverflow。您应该解释您希望计数器会发生什么，以及您所看到的会发生什么。

标签： javascript button closures counter reset

【解决方案1】：

我对闭包了解不多（看起来很有趣...），但是将 nr 变量移到函数之外，然后在 nr 上调用 reset 将重置计数器。

var count = (function() {
  var nr = 0;
  return function(reset = false) {
    nr = reset ? 0 : nr + 1
    return nr;
  }
})();

function geo() {
  document.getElementById("count").innerHTML = count();
}

function reset() {
  document.getElementById("count").innerHTML = count(true);
}

<button type="button" onclick="geo()">Count!</button>
<button type="button" onclick="reset()">Reset!</button>
<p id="count">0</p>

【讨论】：

谢谢，但这不是我想要的。我不想使用全局变量。这就是为什么上面的代码要避免全局变量。或者您使用全局变量转换代码。
嗨，@Geo 看看更新的解决方案。您可以传递一个变量来将计数器重置为从闭包返回的函数。
谢谢！所以我想要。太完美了！

【解决方案2】：

我什至不确定你现在拥有的东西是否有效。

const addBtn = document.querySelector('#add');
const resetBtn = document.querySelector('#reset');
const pCount = document.querySelector('#count')

let start = 0;


function add(){
  start++
  pCount.innerHTML = start
}

function reset(){
  start = 0;
  pCount.innerHTML = start
}

addBtn.addEventListener('click', add)
resetBtn.addEventListener('click', reset)

<button id="add"> Add </button>
<button  id="reset" > Reset </button>
<p id="count"></p>

【讨论】：

谢谢！可能我说的不是很清楚。我不想使用全局变量。这就是为什么计数器代码被设计成避免全局变量的原因。