使用html和javascript添加两个数字_Javascript_Html

使用html和javascript添加两个数字

javascript html

使用html和javascript添加两个数字,javascript,html,Javascript,Html,我正在尝试添加两个数字。从用户那里获取输入，但我无法找到哪里出了问题。每次我点击提交，它只是刷新页面  <html> <body> <div class="container-fluid"> <header> <h1>Business Registration Address

我正在尝试添加两个数字。从用户那里获取输入，但我无法找到哪里出了问题。每次我点击提交，它只是刷新页面

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


商业登记地址设置
第一


+

二号


提交


函数submit1（）{
var a=document.getElementByID（“number1”）.value；
var b=document.getElementByID（“number2”）.value；
var c=a+b；
document.getElementByID（“screen1”）.innerHTML=c；
}

您正在使用

type=“submit”

这就是页面刷新的原因

单击

按钮时，需要使用type=“button”
调用javascript函数
<button type="button" class="btn btn-info" onclick="submit1()">submit</button><br><br>

正如@Mairaj Ahmad提到的，只需将type='button'
从type='submit更改为1。type=“button”2。documentgetElementById 3。解析整数。工作url：如何更改此按钮名称？
var c = parseInt(a) + parseInt(b); 

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

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