Строительный калькулятор - не заставить его работать

1

Я строю калькулятор, и пока он начинает работать, я немного застрял. Я вставил HTML и JS сюда.

Я пытался выяснить, что пошло не так, и я думаю, что это из-за функций, вызывающих друг друга, а не должным образом... "закрытие/завершение". Я пытался увидеть, что пошло не так с добавлением console.logs. Я сломаю это здесь:

Я listenFirst "on" и listenFirst функция listenFirst. listenFirst имеет eventListener и ждет пользователя, чтобы нажать на номер (firstNumber). Как только нажата waitforOperator, запускается 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>
Теги:
function

1 ответ

0

Вы никогда не удаляете прослушиватель событий, который вы добавили к listenFirst кнопкам в listenFirst. Поэтому, когда пользователь нажимает кнопки после waitForOperator и код в listenFirst и listenSecond. listenFirst call waitForOperator снова.

JavaScript: удалить прослушиватель событий Посмотрите этот ответ, чтобы узнать, как удалить прослушиватели событий.

Поделиться
  • 0
    Спасибо за Ваш ответ! Ну, у меня проблемы с его реализацией. Должен ли я реализовать это в функции listenSecond? Или нет? Поскольку eventListener все еще должен работать для listenSecond, чтобы работать.
  • 0
    Насколько я могу судить, вам нужно создать новую функцию, которая будет обрабатывать события, а не анонимную функцию, как вы в данный момент. Затем вы можете удалить обработчик событий, перебирая кнопки и удаляя события, которые вызывают эту функцию, как показано в верхнем примере в сообщении, связанном со стековым потоком.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню