Adding two numbers using html and javascript

Question

I am trying to add two numbers.Taking input from the user but I am not able to find that where I am going wrong. Every time I click on submit it just refreshes the page.

<!--Html -->



     <html>
        <body>
            <div class="container-fluid">
                <header>
                    <h1>Business Registration Address Setup</h1>
                </header>

         <form>
                <label>number 1</label>
                <input type="text" name="number1" id="number1" placeholder="enter single digit number"> <br>
                +<br>
                <label>number 2</label>
                <input type="text" name="number2" id="number2" placeholder="enter single digit number"><br>
                <button type="submit" class="btn btn-info" onclick="submit1()">submit</button><br><br>
                <div class="screen" id="screen1"></div>

            </form>

            </div> <!-- End Container-->



        <footer>

        </footer>
          <script type="text/javascript">
              function submit1(){
                 var a = document.getElementByID("number1").value;
              var b = document.getElementByID("number2").value;
                var c = a + b; 
            document.getElementByID("screen1").innerHTML=c;
              }
          </script>

        </body>
        </html>

As @Mairaj Ahmad mentioned, just change `type='button'` from `type='submit` — Hardik Pithva, Jun 15 '16 at 07:07
Mistakes are 1. type="button" 2. documentgetElementById 3. parse the integer. Working url: http://codepen.io/SESN/pen/xOOGZG — SESN, Jun 15 '16 at 07:10

Mairaj Ahmad · Answer 1 · 2016-06-15T07:09:29.697

You are using type="submit" that's why page is refreshed.

You need to use type="button" to call your javascript function when button is clicked.

<button type="button" class="btn btn-info" onclick="submit1()">submit</button><br><br>

Also you are using document.getElementByID which is not a function it is document.getElementById.

And you also need to parse the values to int to be added otherwise values will be just concatenated and not added.

var c = parseInt(a) + parseInt(b);

score 2 · Accepted Answer · answered Jun 15 '16 at 07:15

<!DOCTYPE html>
<html>
<body>

<div class="container-fluid">
    <header>
        <h1>Business Registration Address Setup</h1>
    </header>

    <label>number 1</label>
    <input type="text" name="number1" id="number1" placeholder="enter single digit number"> <br>
    +<br>
    <label>number 2</label>
    <input type="text" name="number2" id="number2" placeholder="enter single digit number"><br>
    <button type="button" class="btn btn-info" onclick="submit1()">submit</button><br><br>
    <div class="screen" id="screen1"></div>


</div> <!-- End Container-->


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$( document ).ready(function() {

});
function submit1(){
    var a =  document.getElementById("number1").value;
    var b =  document.getElementById("number2").value;
    var c = parseInt(a) + parseInt(b); 
    document.getElementById("screen1").innerHTML=c;
  }
</script>

</body>
</html>

Edit

document.getElementByID  -------> document.getElementById
var c=a+b ----------------------> var c = parseInt(a) + parseInt(b)
button type="submit" -----------> button type="button"

how to change this button name? – lunesco Apr 30 '19 at 22:30 — lunesco, Apr 30 '19 at 22:30

Adding two numbers using html and javascript

2 Answers2