title: variable set to a empty string without assigement and want change value
body: <p>I've created a calculator and I want the <code>operate()</code> function to be called once all values are not an empty string. For example <code>5 + 5</code> should call <code>operate()</code> as soon as the second number is entered.</p>
  <p>Whats confusing me is the input field is displaying <code>5 + 5 </code> but when I <code>console.log</code> the <code>input.value</code> I get <code>5 +  </code> and <code>secondNumbers = &quot;&quot;</code>. I'm not sure why this is happening.</p>
  <p><a href="https://i.stack.imgur.com/Yz8Bz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Yz8Bz.png" alt="enter image description here" /></a></p>
  <p>If you look in the console to the right of the image you see I get <code>4 + </code> which is <code>console.log(inputdisplay.value)</code></p>
  <p>I'im not sure if this is Javascript being weird or if I've done something wrong.</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>const buttons = document.querySelectorAll('button');
  const inputdisplay = document.querySelector('.input-display');
  
  var firstNumbers;
  var secondNumbers;
  var operator;
  
  buttons.forEach(function(button) {
    button.addEventListener('click', function(e) {
      firstNumbers = inputdisplay.value.split(" ")[0]
      operator = inputdisplay.value.split(" ")[1]
      secondNumbers = inputdisplay.value.split(" ")[2]
  
      console.log(inputdisplay.value)
      console.log(secondNumbers)
  
      if (typeof(secondNumbers) === "string" &amp;&amp; secondNumbers !== "") {
        console.log("ran")
        inputdisplay.value = operate()
      } else if (button.classList.contains("AC")) {
        inputdisplay.value = ""
        return
      } else if (button.classList.contains("equals")) {
        inputdisplay.value = operate()
      } else if (button.classList.contains("operator")) {
        inputdisplay.value += ` ${button.innerText} `
      } else {
        inputdisplay.value += button.innerText
      }
    })
  })
  
  function operate() {
    intFirstNumbers = parseFloat(firstNumbers)
    intSecondNumbers = parseFloat(secondNumbers)
    try {
      switch (operator) {
        case "+":
          return intFirstNumbers + intSecondNumbers
        case "-":
          return intFirstNumbers - intSecondNumbers
        case "*":
          return intFirstNumbers * intSecondNumbers
        case "/":
          return intFirstNumbers / intSecondNumbers
      }
    } catch (e) {
      return "Error: " + e.message
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;input readonly class="input-display" type="text"&gt;
    &lt;div class="grid"&gt;
      &lt;div class="numberGrid"&gt;
        &lt;div class="row-1"&gt;
          &lt;button class=" button 1"&gt;1&lt;/button&gt;
          &lt;button class=" button 2"&gt;2&lt;/button&gt;
          &lt;button class=" button 3"&gt;3&lt;/button&gt;
          &lt;button class=" button 4"&gt;4&lt;/button&gt;
        &lt;/div&gt;
        &lt;div class=" row-2"&gt;
          &lt;button class=" button 5"&gt;5&lt;/button&gt;
          &lt;button class=" button 6"&gt;6&lt;/button&gt;
          &lt;button class=" button 7"&gt;7&lt;/button&gt;
          &lt;button class=" button 8"&gt;8&lt;/button&gt;
        &lt;/div&gt;
        &lt;div class="row-3"&gt;
          &lt;button class=" button 9"&gt;9&lt;/button&gt;
          &lt;button class=" button 0"&gt;0&lt;/button&gt;
          &lt;button class=" button decimal "&gt;.&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="operatorGrid"&gt;
        &lt;div class="row-4"&gt;
          &lt;button class=" button sum operator"&gt; + &lt;/button&gt;
          &lt;button class=" button subtract operator"&gt; - &lt;/button&gt;
          &lt;button class=" button multiply operator"&gt; * &lt;/button&gt;
          &lt;button class=" button divide operator"&gt; / &lt;/button&gt;
          &lt;button class=" button backspace operator"&gt; -&gt;&lt;/button&gt;
          &lt;button class=" button equals"&gt; = &lt;/button&gt;
          &lt;button class=" button AC"&gt;AC&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>