title: JavaScript Calculator equal button returns "undefined"
body: <p>I'm working on a simple JavaScript calculator. Everything seems fine and other buttons works as expected except for the equal button which returns an &quot;undefined&quot; when it is clicked. On clicking the equal button, &quot;if&quot; the value of the screen is empty, I want the value of the screen to be set to an empty string, else, the new screen.value should be the result of an eval();
  I've gone over the code several times and can't find what the problem is. Pls help. Thanks.</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;calculator.css&quot;&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class=&quot;wrapper&quot;&gt;
          &lt;form&gt;
              &lt;input type=&quot;text&quot; class=&quot;screen&quot; placeholder=&quot;0&quot; value=&quot;&quot;;&gt;
          &lt;/form&gt;
  
          &lt;div class=&quot;buttons&quot;&gt;
              &lt;button type=&quot;button&quot; class=&quot;btn btn-yellow&quot; data-num=&quot;*&quot;&gt;*&lt;/button&gt;
              &lt;button type=&quot;button&quot; class=&quot;btn btn-yellow&quot; data-num=&quot;/&quot;&gt;/&lt;/button&gt;
              &lt;button type=&quot;button&quot; class=&quot;btn btn-yellow&quot; data-num=&quot;-&quot;&gt;-&lt;/button&gt;
              &lt;button type=&quot;button&quot; class=&quot;btn btn-yellow&quot; data-num=&quot;+&quot;&gt;+&lt;/button&gt;
  
              &lt;button type=&quot;button&quot; class=&quot;btn btn-grey&quot; data-num=&quot;9&quot;&gt;9&lt;/button&gt;
              &lt;button type=&quot;button&quot; class=&quot;btn btn-grey&quot; data-num=&quot;8&quot;&gt;8&lt;/button&gt;
              &lt;button type=&quot;button&quot; class=&quot;btn btn-grey&quot; data-num=&quot;7&quot;&gt;7&lt;/button&gt;
              &lt;button type=&quot;button&quot; class=&quot;btn btn-grey&quot; data-num=&quot;6&quot;&gt;6&lt;/button&gt;
              &lt;button type=&quot;button&quot; class=&quot;btn btn-grey&quot; data-num=&quot;5&quot;&gt;5&lt;/button&gt;
              &lt;button type=&quot;button&quot; class=&quot;btn btn-grey&quot; data-num=&quot;4&quot;&gt;4&lt;/button&gt;
              &lt;button type=&quot;button&quot; class=&quot;btn btn-grey&quot; data-num=&quot;3&quot;&gt;3&lt;/button&gt;
              &lt;button type=&quot;button&quot; class=&quot;btn btn-grey&quot; data-num=&quot;2&quot;&gt;2&lt;/button&gt;
              &lt;button type=&quot;button&quot; class=&quot;btn btn-grey&quot; data-num=&quot;1&quot;&gt;1&lt;/button&gt;
              &lt;button type=&quot;button&quot; class=&quot;btn btn-grey&quot; data-num=&quot;0&quot;&gt;0&lt;/button&gt;
              &lt;button type=&quot;button&quot; class=&quot;btn btn-grey&quot; data-num=&quot;.&quot;&gt;.&lt;/button&gt;
  
              &lt;button type=&quot;button&quot; class=&quot;btn btn-equal&quot;&gt;=&lt;/button&gt;
              &lt;button type=&quot;button&quot; class=&quot;btn btn-clear&quot;&gt;C&lt;/button&gt;
              
          &lt;/div&gt;
  
  
      &lt;/div&gt;
          
  
  &lt;script type=&quot;text/javascript&quot; src=&quot;calculator.js&quot;&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  
  JAVASCRIPT CODE HERE
  
  (function(){
  
      let screen = document.querySelector(&quot;.screen&quot;);
      let buttons = document.querySelectorAll(&quot;.btn&quot;);
      let equal = document.querySelector(&quot;.btn-equal&quot;);
      let clear = document.querySelector(&quot;.btn-clear&quot;);
  
      buttons.forEach(function(button) {
          button.addEventListener(&quot;click&quot;, function(e){
              let value = e.target.dataset.num;
              screen.value += value;
          })
      });
      
      equal.addEventListener(&quot;click&quot;, function(e){
         if (screen.value === &quot;&quot;) {
            screen.value = &quot;&quot;;
          } else{
              let answer = eval(screen.value); 
              screen.value = answer;
          } 
      })
  
      clear.addEventListener(&quot;click&quot;, function(){
          screen.value = &quot;&quot;;
      })
  
  
  })();
  
  </code></pre>