Priyanka Maurya Priyanka Maurya - 5 months ago 9
HTML Question

Adding two numbers using html and javascript

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>

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"
Comments