Skip to content
Advertisement

Javascript – Stuck in an if statement – Beginner Question

I am trying to make a calculator, simply my problem is this:

  1. Page refreshes.
  2. User clicks on any number and the number gets added to the First Number: nums_clicked h1.
  3. If user clicks on an operator sign(+ - *), the clicked boolean becomes true.
  4. If clicked is true, add the numbers clicked to the Second Number: nums_clicked

My problem is even if I click on an operator sign, it keeps adding the numbers I am clicking to the First Number: nums_clicked h1, why is that happening? It even happens while clicked is TRUE!

My

let numbers = [];
let first_num = "";
let second_num = "";
let clicked = false;
let result = false;
for (var i = 0; i < 9; i++) {
  numbers[i] = parseInt(document.querySelectorAll("button")[i].innerText);

}

for (var i = 9; i < 12; i++) {
  document.querySelectorAll("button")[i].addEventListener("click", function() {
    clicked = true;
  });
}

if (!clicked && !result) {
  for (let i = 0; i < 9; i++) {
    if (clicked) {
      break;
    }
    document.querySelectorAll("button")[i].addEventListener("click",
      function() {
        console.log("clicked = " + clicked);

        first_num += this.innerText;
        document.getElementById("firstNumber").innerText = "Number1: " + first_num;
      });
  }
}
if (clicked && !result) {
  for (let i = 0; i < 9; i++) {

    document.querySelectorAll("button")[i].addEventListener("click",
      function() {

        second_num += this.innerText;
        document.getElementById("secondNumber").innerText = "Number2: " + second_num;
      });
  }
}
document.getElementById("result-btn").addEventListener("click",
  function() {

    result = true;
  });
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/styles.css">
  <title></title>
</head>

<body>

  <div class="container">

    <button type="button" name="button">1</button>
    <button type="button" name="button">2</button>
    <button type="button" name="button">3</button>
    <br>
    <button type="button" name="button">4</button>
    <button type="button" name="button">5</button>
    <button type="button" name="button">6</button>
    <br>
    <button type="button" name="button">7</button>
    <button type="button" name="button">8</button>
    <button type="button" name="button">9</button>
    <br>
    <br>
    <button type="button" name="button">+</button>
    <button type="button" name="button">*</button>
    <button type="button" name="button">-</button>
    <br>
    <button id="result-btn" type="button" name="button">Result</button>
    <h1 id="firstNumber">First Number: </h1>
    <h1 id="secondNumber">Second Number: </h1>
    <h1 id="result">Result: </h1>
  </div>
  <script src="index.js" charset="utf-8"></script>
</body>

</html>

Code:

Screenshot of index.html (Red part while clicked=false and blue part is while clicked=true: enter image description here

Advertisement

Answer

Your main issue was that you were never creating the click events for the second number, because those were behind the if(!result.... Like Barmar mentioned, even if you created the click events for the second number, the events from the first number would be triggered also and it would still not work. Also you did not had anything for setting the actual results.

I made some changes on your code to make it simpler to understand, but still trying to follow your logic. Here you go:

let first_num;
let second_num;
let operation;

for (var i = 9; i < 12; i++) {
  document.querySelectorAll('button')[i].addEventListener('click', function () {
    operation = this.innerText;
  });
}

for (let i = 0; i < 9; i++) {
  document.querySelectorAll('button')[i].addEventListener('click', function () {
    if (!operation) {
      document.getElementById('firstNumber').innerText += this.innerText;
    } else {
      document.getElementById('secondNumber').innerText += this.innerText;
    }
  });
}

document.getElementById('result-btn').addEventListener('click', function () {
  first_num = document.getElementById('firstNumber').innerText;
  second_num = document.getElementById('secondNumber').innerText;
  document.getElementById('result').innerText = calculate(
    parseInt(first_num),
    parseInt(second_num),
    operation
  );
});

function calculate(a, b, operation) {
  if (operation === '+') {
    return sum(a, b);
  } else if (operation === '-') {
    return minus(a, b);
  } else if (operation === '*') {
    return multiply(a, b);
  }
}

function sum(a, b) {
  return a + b;
}
function minus(a, b) {
  return a - b;
}
function multiply(a, b) {
  return a * b;
}
<div class="container">
    <button type="button" name="button">1</button>
    <button type="button" name="button">2</button>
    <button type="button" name="button">3</button>
    <br />
    <button type="button" name="button">4</button>
    <button type="button" name="button">5</button>
    <button type="button" name="button">6</button>
    <br />
    <button type="button" name="button">7</button>
    <button type="button" name="button">8</button>
    <button type="button" name="button">9</button>
    <br />
    <br />
    <button type="button" name="button">+</button>
    <button type="button" name="button">*</button>
    <button type="button" name="button">-</button>
    <br />
    <button id="result-btn" type="button" name="button">Result</button>
    <h1>First Number: <span id="firstNumber"></span></h1>
    <h1>Second Number: <span id="secondNumber"></span></h1>
    <h1>Result: <span id="result"></span></h1>
  </div>
User contributions licensed under: CC BY-SA
9 People found this is helpful
Advertisement