Javascript - Stuck in an if statement - Beginner Question

Question

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

Page refreshes.
User clicks on any number and the number gets added to the First Number: nums_clicked h1.
If user clicks on an operator sign(+ - *), the clicked boolean becomes true.
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;
  });





  
  
  




  

    
    
    
    

    
    
    
    

    
    
    
    

    

    
    
    
    

    
    First Number: 
    Second Number: 
    Result:

Code:

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

user_6387982 · 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;
}


    
    
    
    

    
    
    
    

    
    
    
    

    

    
    
    
    

    
    First Number: 
    Second Number: 
    Result:

Javascript - Stuck in an if statement - Beginner Question

1 Answers