Building calculator - Not getting it to work

Question

I'm building a calculator, and while it's starting to work, I'm kind of stuck. I've pasted the HTML and the JS down here.

I've been trying to figure out what went wrong, and I think it's because of the functions calling each other and not properly... "closing/ending". I've been trying to see what went wrong with adding console.logs. I'll break it down here:

I press "on" and function listenFirst gets run. listenFirst has an eventListener and waits for the user to click a number (firstNumber). As soon as a number is clicked, waitforOperator is run (which now has the firstNumberas an attribute. Now, waitforOperator waits for a click on the plus sign, and as soon as the user clicks on the plus sign, listenSecondgets run. Now this is where it goes wrong: as soon as I click the second number, waitforOperatorgets run again and now firstNumber and secondNumber are the same.

To be clear: I just want this problem solved before I delve into the other operators, so please don't pay attention to the other operators like minus and multiplication.

A nudge in the right direction would be nice! Thanks in advance.

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>

score 0 · Answer 1 · answered Jan 12 '19 at 16:53

0

You never remove the event listener you added to number number buttons in listenFirst. So when the user presses the buttons after waitForOperator both the code in listenFirst and listenSecond runs. listenFirst call waitForOperator again.

JavaScript: remove event listener Have a look at this answer for how to remove event listeners.

answered Jan 12 '19 at 16:53

Tim

1,153
11
21

Thanks for your answer! Well, I'm having trouble implementing it. Should I implement it into the listenSecond function? Or not? Because the eventListener still needs to work for the listenSecond to work. – jhavn Jan 12 '19 at 17:52
As far as I can tell you need to create a new function which handles the events rather than a anonymous function like you are at the moment. Then you can remove the event handler by looping through the buttons and removing events which call that function as shown in the top example in the stackoverflow post I linked. – Tim Jan 12 '19 at 18:37
Thanks a lot, Tim. It works! Back in business. :) Have a good day/evening. For future reference: it was indeed the creation of a new function that handles the events that got it working. – jhavn Jan 12 '19 at 19:54

Building calculator - Not getting it to work

1 Answers1