Variable is not displaying in input box | Javascript

I am trying to make a calculator using buttons to display numbers and operations in a input box. However, the variable 'nums' wont display

Heres the code:

        function display(clicked_id) {              var nums = document.getElementById("display_area").value;              nums = nums + document.getElementById(clicked_id).value;              document.getElementById("display_area") === nums;          }          function calculate() {              var e = eval(document.getElementById("display_area").value);              document.getElementById("display_area") === e;          }      </script>      <div>          <table border="1" style="width:182px">              <tr><td>                  <input type="number" id="display_area" style="width:164px;text-align:right">              </td></tr>              <tr><td>                  <button id="1" style="width:40px" onclick="display(this.id)" value="1">1</button>                  <button id="2" style="width:40px" onclick="display(this.id)" value="2">2</button>                  <button id="3" style="width:40px" onclick="display(this.id)" value="3">3</button>                  <button id="+" style="width:40px" onclick="display(this.id)" value="+">+</button>              </td></tr>              <tr><td>                  <button id="4" style="width:40px" onclick="display(this.id)" value="4">4</button>                  <button id="5" style="width:40px" onclick="display(this.id)" value="5">5</button>                  <button id="6" style="width:40px" onclick="display(this.id)" value="6">6</button>                  <button id="-" style="width:40px" onclick="display(this.id)" value="-">-</button>              </td></tr>              <tr><td>                  <button id="7" style="width:40px" onclick="display(this.id)" value="7">7</button>                  <button id="8" style="width:40px" onclick="display(this.id)" value="8">8</button>                  <button id="9" style="width:40px" onclick="display(this.id)" value="9">9</button>                  <button id="x" style="width:40px" onclick="display(this.id)" value="x">x</button>              </td></tr>              <tr><td>                  <button id="." style="width:40px" onclick="display(this.id)" value=".">.</button>                  <button id="0" style="width:40px" onclick="display(this.id)" value="0">0</button>                  <button id="=" style="width:40px" onclick="calculate()" value="=">=</button>                  <button id="/" style="width:40px" onclick="display(this.id)" value="/">/</button>              </td></tr>          </table>      </div>  

After a few tests I think that this line is the problem:

document.getElementById("display_area") === nums;

Any suggestions?

https://stackoverflow.com/questions/66961769/variable-is-not-displaying-in-input-box-javascript April 06, 2021 at 09:51AM