提高 Javascript 性能

Question

我正在尝试改进以下代码（用于按钮计数器），但我不确定初始检查。

document.querySelectorAll("#minus")[0].addEventListener("click", function(e){
  e.stopPropagation();
  document.querySelectorAll("#number")[0].innerText = Number(document.querySelectorAll("#number")[0].innerText) - 1
})

document.querySelectorAll("#plus")[0].addEventListener("click", function(e) {
  e.stopPropagation();
  document.querySelectorAll("#number")[0].innerText = Number(document.querySelectorAll("#number")[0].innerText) + 1
})

我如何使此代码更有效？

我还希望添加一个计数器不能达到零的规则。

感谢您提供任何帮助:)

Answer 1

您可以使用querySelector缩短它，并添加如下条件：

 var num = document.querySelector("#number") , plus = document.querySelector("#plus") , minus = document.querySelector("#minus") minus.addEventListener("click", function(e){ var value = Number(num.innerText) num.innerText = value === 1 ? 1 : value - 1 }) plus.addEventListener("click", function(e) { num.innerText = Number(num.innerText) + 1 })

 div{ text-align: center; cursor: pointer; width: 100px; outline: 1px solid blue; }

 <div id="plus">+</div> <div id="minus">-</div> <div id="number">1</div>