javascript - 增减计数器JS

Question

我需要在单击按钮时增加和减少计数器。

const checkbox = document.getElementById('cb_enabled'),
  increment = document.getElementById('btn_increment'),
  decrement = document.getElementById('btn_decrement'),
  counter = document.getElementById('js-counter').innerHTML;

checkbox.addEventListener("change", function(checkbox) {

  if (this.checked === false) {
    increment.disabled = true;
    decrement.disabled = true;
  } else {
    increment.disabled = false;
    decrement.disabled = false;
  }
});

increment.onclick = () => {
  counter.innerHTML = 1;
}

decrement.onclick = () => {
  counter.innerHTML = 0;
}

<h1 id="js-counter"> 0 </h1>
<button id="btn_decrement" type="button"> Decrement </button>
<button id="btn_increment" type="button"> Increment </button>

<label for="cb_enabled">
  Enable/Disable counter
  <input id="cb_enabled" type="checkbox" checked />
</label>

但我不知道如何增加和减少数字(在本例中，元素进入js-counter)。有什么想法吗？

Answer 1

保留对计数器元素的引用，而不是其innerHTML 属性，并且不要忘记在递增之前parseInt 字符串值。

const checkbox = document.getElementById('cb_enabled'),
  increment = document.getElementById('btn_increment'),
  decrement = document.getElementById('btn_decrement'),
  counter = document.getElementById('js-counter');

checkbox.addEventListener("change", function(checkbox) {

  if (this.checked === false) {
    increment.disabled = true;
    decrement.disabled = true;
  } else {
    increment.disabled = false;
    decrement.disabled = false;
  }
});

increment.onclick = () => {
  const num = parseInt(counter.innerHTML);
  counter.innerHTML = num + 1;
}

decrement.onclick = () => {
   const num = parseInt(counter.innerHTML);
  counter.innerHTML = num - 1;
}

<h1 id="js-counter"> 0 </h1>
<button id="btn_decrement" type="button"> Decrement </button>
<button id="btn_increment" type="button"> Increment </button>

<label for="cb_enabled">
  Enable/Disable counter
  <input id="cb_enabled" type="checkbox" checked />
</label>