为计数器创建重置按钮

Question

I have this counter. It is a counter that uses Javascript Closure. Can you help me with a reset button? If you can, to this type of "counter" code, not to another...

HTML CODE

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

JAVASCRIPT CODE

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

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

Answer 1

I'm not even sure what you have right now is working.

 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>

Answer 2

I don't know much about the closure (seems very interesting...) but moving nr variable outside of your function and then call a reset on nr will reset the counter.

 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>