Total sum of all numbers the user has input in HTML Javascript

Question

I need help to create a function that:

Contains information of the total sum of all numbers the user has input so far is calculated, printed to console, and stored on HTML page.
When the total sum is larger than 100, the function prints "it's over" to console.

Any suggestions? Below is what I've got so far:

function adder() {
  var num1 = parseInt(document.getElementById("myform").elements["num1"].value);
  var num2 = parseInt(document.getElementById("myform").elements["num2"].value);
  var total = num1 + num2;
  document.getElementById("p1").innerHTML = total;
}

<form id="myform">
  First Number: <input type="text" name="num1"><br /><br /> Second Number: <input type="text" name="num2"><br /><br />
</form>
<button onclick="adder()"> Submit</button><br><br>
<p id="p1">Results Are Here</p>

please format your code

alpinist
– alpinist

2017-09-26 19:51:13 +00:00
Commented Sep 26, 2017 at 19:51 — alpinist
– alpinist, Commented Sep 26, 2017 at 19:51

Angelos Chalaris · Accepted Answer · 2017-09-26 20:03:39Z

2

You should define and initialize total to 0 outside adder() so that you can add the fields values to the existing sum. Here's an example:

var total = 0;

function adder() {
  var num1 = parseInt(document.getElementById("myform").elements["num1"].value);
  var num2 = parseInt(document.getElementById("myform").elements["num2"].value);
  total += num1 + num2;
  document.getElementById("p1").innerHTML = total;
  if (total > 100) console.log("It's over!");
}

<form id="myform">
  First Number: <input type="text" name="num1"><br /><br /> Second Number: <input type="text" name="num2"><br /><br />
</form>
<button onclick="adder()"> Submit</button><br><br>
<p id="p1">Results Are Here</p>

On a side note if your <button> is part of your <form>, it will cause the page to refresh, so adding type="button" solves this issue in that case and you can see the result properly.

edited Sep 26, 2017 at 20:03

answered Sep 26, 2017 at 19:54

Angelos Chalaris

6,7878 gold badges55 silver badges82 bronze badges

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

4 Comments

freginold Over a year ago

Why would his <button> submit the form, if it's not a submit button and it's outside the form?

Lena Kir Over a year ago

thank you @Angelos Chalaris However, if user input 1 and 2, the line is updated to "3". Next time the user input 2 and 3, then the line is now "Current sum is 8" (3 + 2 + 3). This goes all the way until the sum is larger than 100. How to create that kind of function? Right now it just getting updated with new number each time user inputs it

Angelos Chalaris Over a year ago

@freginold You are absolutely right, my bad. I just updated my code, removing the fix, but keeping the comment at the bottom just in case it's part of the form. Thanks for pointing that out!

Lena Kir Over a year ago

@AngelosChalaris - sorry I'm new here.. could you point me directions on how to mark it? :)

diegorodny · Accepted Answer · 2017-09-26 20:14:46Z

1

Quick mod to above answer to stop the counting after reaches > 100.

var total = 0;

function adder() {
  var num1 = parseInt(document.getElementById("myform").elements["num1"].value);
  var num2 = parseInt(document.getElementById("myform").elements["num2"].value);
  if (total > 100){
    console.log("It's over!");
  } else {
    total += num1 + num2;
    document.getElementById("p1").innerHTML = total;
  }
}

<form id="myform">
  First Number: <input type="text" name="num1"><br /><br /> Second Number: <input type="text" name="num2"><br /><br />
</form>
<button onclick="adder()"> Submit</button><br><br>
<p id="p1">Results Are Here</p>

answered Sep 26, 2017 at 20:14

diegorodny

4322 silver badges7 bronze badges

Collectives™ on Stack Overflow

Total sum of all numbers the user has input in HTML Javascript

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related