title: Javascript - Stuck in an if statement - Beginner Question
body: <p>I am trying to make a calculator, simply my problem is this:</p>
  <ol>
  <li>Page refreshes.</li>
  <li>User clicks on any number and the number gets added to the <code>First Number: nums_clicked</code> h1.</li>
  <li>If user clicks on an operator sign<code>(+ - *)</code>, the clicked boolean becomes <code>true</code>.</li>
  <li>If clicked is <code>true</code>, add the numbers clicked to the <code>Second Number: nums_clicked</code></li>
  </ol>
  <p>My problem is even if I click on an operator sign, it keeps adding the numbers I am clicking to the <code>First Number: nums_clicked</code> h1, why is that happening? It even happens while clicked is TRUE!</p>
  <p>My</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let numbers = [];
  let first_num = "";
  let second_num = "";
  let clicked = false;
  let result = false;
  for (var i = 0; i &lt; 9; i++) {
    numbers[i] = parseInt(document.querySelectorAll("button")[i].innerText);
  
  }
  
  for (var i = 9; i &lt; 12; i++) {
    document.querySelectorAll("button")[i].addEventListener("click", function() {
      clicked = true;
    });
  }
  
  if (!clicked &amp;&amp; !result) {
    for (let i = 0; i &lt; 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 &amp;&amp; !result) {
    for (let i = 0; i &lt; 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;
    });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" dir="ltr"&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;link rel="stylesheet" href="css/styles.css"&gt;
    &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;div class="container"&gt;
  
      &lt;button type="button" name="button"&gt;1&lt;/button&gt;
      &lt;button type="button" name="button"&gt;2&lt;/button&gt;
      &lt;button type="button" name="button"&gt;3&lt;/button&gt;
      &lt;br&gt;
      &lt;button type="button" name="button"&gt;4&lt;/button&gt;
      &lt;button type="button" name="button"&gt;5&lt;/button&gt;
      &lt;button type="button" name="button"&gt;6&lt;/button&gt;
      &lt;br&gt;
      &lt;button type="button" name="button"&gt;7&lt;/button&gt;
      &lt;button type="button" name="button"&gt;8&lt;/button&gt;
      &lt;button type="button" name="button"&gt;9&lt;/button&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;button type="button" name="button"&gt;+&lt;/button&gt;
      &lt;button type="button" name="button"&gt;*&lt;/button&gt;
      &lt;button type="button" name="button"&gt;-&lt;/button&gt;
      &lt;br&gt;
      &lt;button id="result-btn" type="button" name="button"&gt;Result&lt;/button&gt;
      &lt;h1 id="firstNumber"&gt;First Number: &lt;/h1&gt;
      &lt;h1 id="secondNumber"&gt;Second Number: &lt;/h1&gt;
      &lt;h1 id="result"&gt;Result: &lt;/h1&gt;
    &lt;/div&gt;
    &lt;script src="index.js" charset="utf-8"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Code:</p>
  <p>Screenshot of index.html (Red part while <code>clicked=false</code> and blue part is while <code>clicked=true</code>:
  <a href="https://i.stack.imgur.com/ReBsV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ReBsV.png" alt="enter image description here" /></a></p>