Question

我正在构建一个计算器，并且在它开始工作时，我有点卡住了。我在这里粘贴了HTML和JS。

我一直在试图找出问题出在哪里，我认为这是因为函数之间相互调用而导致的错误……“关闭/结束”。我一直在尝试查看添加console.logs出了什么问题。我在这里将其分解：

我按“ on”，函数listenFirst开始运行。 listenFirst有一个eventListener，并等待用户单击一个数字（firstNumber）。点击数字后，就会运行waitforOperator（现在将firstNumber作为属性。现在， waitforOperator等待单击加号，一旦用户单击加号，就会运行listenSecond。现在在这里出现问题：点击第二个数字后，waitforOperator再次运行，现在firstNumber和secondNumber相同。

要明确：我只是想在深入研究其他运算符之前解决此问题，所以请不要注意减号和乘法之类的其他运算符。

向正确的方向轻推会很好！预先感谢。

let displayBox = document.getElementById("displayBox");
let pressButton = document.querySelectorAll(".column");
let turnOn = document.getElementById("turnOn");
let minus = document.getElementById("minus");
let plus = document.getElementById("plus");
let firstNumber = Number();
let secondNumber = Number();

turnOn.addEventListener("click", function() {
  displayBox.textContent = "CALCULATOR ON. GIVE FIRST NR.";
  console.log("launching function listenFirst");
  listenFirst();
});

let listenFirst = () => {
  console.log("launched listenFirst");
  for (var i = 0; i < pressButton.length; i++) {
    pressButton[i].addEventListener("click", function() {
      firstNumber = displayBox.textContent = Number(this.id);
      waitForOperator(firstNumber);

    });
    
  }
  
};



let listenSecond = () => {
  console.log("launched listenSecond");
  console.log(`first number is still ${firstNumber}`)
  console.log(`waiting for you to press second number`)
  for (var i = 0; i < pressButton.length; i++) {
    pressButton[i].addEventListener("click", function() {
      secondNumber = displayBox.textContent = Number(this.id);
      console.log(`After click on second number, first number is ${firstNumber} and second number is ${secondNumber}`)
    });
    
  }
  console.log(
    `Now first number is ${firstNumber} and second number is ${secondNumber}`
  );
};
let waitForOperator = () => {
    console.log("launched waitForOperator");
    console.log(`First number is ${firstNumber}`);
    console.log("Waiting for you to press plus");
    plus.addEventListener("click", function() {
      listenSecond(firstNumber);
    });
  };
let calculateSum = () => {
  console.log(`Second number is ${secondNumber}`);
};

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Hello Bulma!</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css"
    />
    <script
      defer
      src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"
    ></script>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
      
    <section class="section">
        
      <h1 class="title has-text-centered" id="titleText">Calculator.</h1>
      
      <div class="container">
          
        <div class="field">
          <a class="button is-fullwidth is-static" id="displayBox"></a><a class="button is-success" id="turnOn">ON</a>
        </div>
        <div class="calculator">
          <div class="columns">
            <div class="column" id="7">7</div>
            <div class="column" id="8">8</div>
            <div class="column" id="9">9</div>
            <div class="column" id="minus">-</div>
          </div>
          <div class="columns">
            <div class="column" id="4">4</div>
            <div class="column" id="5">5</div>
            <div class="column" id="6">6</div>
            <div id="plus">+</div>
          </div>
          <div class="columns">
            <div class="column" id="1">1</div>
            <div class="column" id="2">2</div>
            <div class="column" id="3">3</div>
            <div class="column" id="equals">=</div>
          </div>
          <div class="columns">
            <div class="column" id="0">0</div>
            <div class="column" id="dot">.</div>
          </div>
        </div>
      </div>

    </section>
    <script src="script.js"></script>
  </body>
</html>

Answer 1

您永远不会删除添加到listenFirst中数字按钮上的事件监听器。因此，当用户在waitForOperator之后按下按钮时，listenFirst和listenSecond中的代码都会运行。 listenFirst再次致电waitForOperator。

JavaScript: remove event listener看看如何删除事件监听器的答案。

建筑计算器-无法正常使用

1 个答案: