Question

19

Adding two numbers using html and javascript

rated 0 times [ 25] [ 6] / answers: 1 / hits: 19655 / 8 Years ago, wed, june 15, 2016, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

lailab

Add To Favorites

Follow

Total Points: 706

Total Questions: 102

Total Answers: 95

Location: Falkland Islands

Member since Mon, Jul 13, 2020

4 Years ago

lailab questions

1 How can I solve this error? export 'default' (imported as 'App') was not found in './App' (possible exports: App) (im using react)

Sat, Jan 15, 22, 00:00, 2 Years ago

1 How to test a global event bus in VueJS

Fri, Feb 21, 20, 00:00, 4 Years ago

1 TypeError: render is not a function updateContextConsumer

Tue, Feb 4, 20, 00:00, 4 Years ago

1 How to add font awesome icon dynamically from JS file?

Sun, Apr 14, 19, 00:00, 5 Years ago

1 NestJs: How to have Body input shape different from entity's DTO?

Mon, Apr 1, 19, 00:00, 5 Years ago

View All

answered 8 Years ago deniseryannd · Accepted Answer

<!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