js simple calculator output error

Question

I am trying to make a simple calculator ,but it doesn't work,can someone tell me where is the problem. Thank you!

<form>
  <div>First Number:</div>

  <div> <input type="number" id="num1" /></div>

  <div>Second Number:</div>

  <div> <input type="number" id="num2" /></div>

  <div><input type="button" value="Calculate Sum" onclick="sumNumbers()" /></div>
  <div>Result:</div>
  <div> <input type="number" id="result" /></div>

</form>

<script>
  function sumNumbers() {
    let num1 = document.getElementById('num1');
    let num2 = document.getElementById('num2');
    let sum = Number(num1) + Number(num2);
    document.getElementById('result').innerHTML = sum;
  }
</script>

You get two DOM elements - those are objects pointing to the input elements. Check HTML documentation (Google!!!) how to get the value. Read examples on the web! Google! Read blogs! There are THOUSANDS of small examples of code that show you this kind of stuff. No need for basic private 1-on-1 programming lessons on SO. — Mörre, Nov 22 '17 at 10:49

Alexis · Answer 1 · 2017-11-22T10:56:03.807

Multiple things

First if you want to get the input value you've to access to the value attribute of your input

document.getElementById('id').value

Second one, if you wanna set an input value, don't use innerHTML for this. It's only usefull when you want to update the content of a HTML element.

function sumNumbers() {
    let num1 = document.getElementById('num1').value;
    let num2 = document.getElementById('num2').value;
    let sum = Number(num1) + Number(num2);
    document.getElementById('result').value = sum;
}

<form>
<div>First Number:</div>

<div>  <input type="number" id="num1" /></div>

<div>Second Number:</div>

<div>   <input type="number" id="num2" /></div>

<div><input type="button" value="Calculate Sum" onclick="sumNumbers()"/></div>
<div>Result:</div>
<div> <input type="number" id="result" /></div>

</form>

score 0 · Answer 2 · answered Nov 22 '17 at 10:51

You were not extracting the value from input, use

let num1 = document.getElementById('num1').value

and same goes for settig the value i.e.

document.getElementById('result').value = sum

<form>
  <div>First Number:</div>

  <div> <input type="number" id="num1" /></div>

  <div>Second Number:</div>

  <div> <input type="number" id="num2" /></div>

  <div><input type="button" value="Calculate Sum" onclick="sumNumbers()" /></div>
  <div>Result:</div>
  <div> <input type="number" id="result" /></div>

</form>

<script>
  function sumNumbers() {
    let num1 = document.getElementById('num1').value;
    let num2 = document.getElementById('num2').value;
    let sum = Number(num1) + Number(num2);
    document.getElementById('result').value = sum;
  }
</script>

js simple calculator output error

2 Answers2