带有显示值的 PopUp 问题的 Javascript 计算器

Question

我在弹出窗口中有一个 HTML 计算器。每次我第一次打开它时，计算都是正确的。如果我隐藏弹出窗口并在我按 6 而不是 6 时再次打开它，它会显示 66。如果我再次关闭它并在我按 5 时打开它，它会显示 555 等等。这是我的代码:

片段:

var calculator = document.querySelector('#calculator3');
var keys = calculator.querySelector('#calculator-keys3');
var num="";
keys.addEventListener('click', e => {

  if (e.target.matches('button')) {
    var key = e.target;
    var action = key.dataset.action;
    var keyContent = key.textContent;

    if (!action) {

      num = num + keyContent;

      document.getElementById("displayPayment").innerHTML = "num";
    }

    if (action === 'backspace') {
      num = num.slice(0, -1);
      document.getElementById("displayPayment").innerHTML = "num";
    }

    if (action === 'decimal') {
      num = num + ".";
    }
  }
});

<div class="calculator" id="calculator3">
  <div class="calculator-keys" id="calculator-keys3">
    <button type="button" value="1">1</button>
    <button type="button" value="2">2</button>
    <button type="button" value="3">3</button>
    <button type="button" value="4">4</button>
    <button type="button" value="5">5</button>
    <button type="button" value="6">6</button>
    <button type="button" value="7">7</button>
    <button type="button" value="8">8</button>
    <button type="button" value="9">9</button>
    <button type="button" class="key--operator" data-action="add">+/-</button>
    <button type="button" value="0">0</button>
    <button type="button" data-action="decimal" value=",">,</button>
    <button type="button" class="equal-sign" data-action="backspace" value="del"></button>
  </div>
</div>

Answer 1

您需要先解除绑定(bind)事件监听器removeEventListener()或者在添加事件监听器之前检查它是否已经绑定(bind)。

var calculator = document.querySelector('#calculator3');
var keys = calculator.querySelector('#calculator-keys3');
var num="";

var eventListener = function(e) {
  if (e.target.matches('button')) {
    var key = e.target;
    var action = key.dataset.action;
    var keyContent = key.textContent;

    if (!action) {

      num = num + keyContent;

      document.getElementById("displayPayment").innerHTML = "num";
    }

    if (action === 'backspace') {
      num = num.slice(0, -1);
      document.getElementById("displayPayment").innerHTML = "num";
    }

    if (action === 'decimal') {
      num = num + ".";
    }
  }
}

keys.removeEventListener('click', eventListener);

keys.addEventListener('click', eventListener);

如果您不删除第一个事件，那么在您第二次运行此脚本时，第二个事件将绑定(bind)到元素。