0

HTML File 

   <body>
<form name = 'add'>
  <div name = 'add'>
    <input type="number" id='num1'>
    <input type="number" id='num2'>
    <button name = 'sum' onclick="add()"></button>
    <input type="number" id="sum">

  </div>

</form>

  <script src='additionkindergarden.js'></script>

JS file

var num1,num2,sum;

function add(){
num1 = document.getElementById('num1').value;
num2 = document.getElementById('num2').value;
sum = num1 + num2;
return document.getElementById('sum').value = sum;
}

Just started to code without the use of Udemy. I'm stuck here for about 5 hrs. I know its simple but I can't get my JS to connect with my HTML. I put in the number in num1 and num2 places in the HTML when I press the button the screen does a quick refresh, the numbers in num1 and num 2 disappear and the last input box is left blank. Please help with my first solo lvl. 1 coding project.

Improve this question
6
  • You aren't actually returning anything. You should remove the word 'return' Commented Mar 15, 2018 at 12:28
  • The problem is that clicking the button will call add() but also submit the form, which here will reload the page. Remove the <form> tags, you don't need them. Next, you need sum = +num1 + +num2; (otherwise 1 + 2 => 12) Commented Mar 15, 2018 at 12:28
  • @ChrisG The value of a numeric input is a Number so no conversion needed. Commented Mar 15, 2018 at 12:32
  • @JohnnyMopp I don't think that's true: jsfiddle.net/khrismuc/kb5y0c4k (tested on Chrome and Firefox) Commented Mar 15, 2018 at 12:34
  • @ChrisG Ok. I guess you are correct. MDN says value is "A Number representing the value of the number entered into the input". Commented Mar 15, 2018 at 12:37

3 Answers 3

Reset to default
3

The problem is that clicking the button will call add() but also submit the form, which here will reload the page. Remove the <form> tags, you don't need them. Next, an input's .value is text, even if you have type="number", which means you need to turn num1 and num2 into numbers first. I also turned the sum element into a <p> given that it is for output, not input.

var num1, num2, sum;

function add() {
  var num1String = document.getElementById('num1').value;
  var num2String = document.getElementById('num2').value;
  num1 = Number(num1String);
  num2 = Number(num2String);
  sum = num1 + num2;
  document.getElementById('sum').innerHTML = sum;
}
<input type="number" id='num1'>
<input type="number" id='num2'>
<button onclick="add()">Add</button>
<p id="sum"></p>

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

You should do the number cast when setting the variable so that the next line can remain the same. sum = num1 + num2
@DanielGale Why?
The variables are outside the function, meaning if you also try to do a subtract later you will need to know to cast it as a number even though the variables are called num1 and num2. I would say num1 = Number(document.getElementById('num1').value); You could also validate that number before getting to the sum. Perhaps the user puts in 'a'. You won't find the error until you are summing at the moment.
@DanielGale I get your point, but converting to numbers in the sum line is much more readable and also performs the conversion right where + happens, which produces a different result otherwise. I'll change the variable names though.
0

The big hiccup is the <form> element in the HTML -- it's trying to submit the page as a form's native behavior should. The page submission reloads the page (or tries to load an expected page) which clears out your results before you can see them.

var num1,num2,sum;

function add(){
  num1 = document.getElementById('num1').value;
  num2 = document.getElementById('num2').value;
  
  // input from the HTML comes back as text/strings
  // convert them into float numbers 
  // (3.14 for example vs. Integer numbers like 3)
  // Otherwise 1 + 3 would be 13 instead of 4
  sum = parseFloat(num1) + parseFloat(num2);
  
  // Update the input value with the calculated
  // sum
  // .toFixed() restricts how far the decimals will go
  // this helps curve a JS problem where 
  // 5.6 + 2.3 = 7.89999999... instead of 7.9
  document.getElementById('sum').value = sum.toFixed(2);
  
  // you don't have to return anything with this
  // function, but if anything just return true
  return true;
}
<div name="add">
    <input type="number" id="num1">
    <input type="number" id="num2">
    <button name="sum" onclick="add()">Add</button>
    <input type="number" id="sum">
  </div>

Improve this answer

2 Comments

You are aware that your code doesn't work, right? .toFixed() produces a string, so entering 3 and 4 produces 3.004.00
@ChrisG updated to where now the .toFixed() is on the number output.
0

Couple of points to be noted:

  1. Form name was add,same as js function,which was causing 'is not a function error'
  2. Button type needs to explicitly set as button,else it submits the form
  3. The num values from text fields needs to be parsed for actual values using parseInt

JS update

var num1,num2,sum;

function add(){
num1 = document.getElementById('num1').value;
num2 = document.getElementById('num2').value;
sum = parseInt(num1) + parseInt(num2);
return document.getElementById('sum').value = sum;
}

HTML Update

 <body>
        <form name='form'>
        <div name='add'>
        <input type="number" id='num1'>
        <input type="number" id='num2'>
        <button name="sum" type="button" onclick="add()"></button>
        <input type="number" id="sum">
        </div>
        </form>
        <script src='additionkindergarden.js'></script>
        </body>
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.