使用html和javascript添加两个数字[重复]答案

【问题标题】：Adding two numbers using html and javascript [duplicate]使用html和javascript添加两个数字[重复]
【发布时间】：2016-10-16 03:27:58
【问题描述】：

我正在尝试添加两个数字。从用户那里获取输入，但我无法找到我出错的地方。每次点击提交都会刷新页面。

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

【问题讨论】：

正如@Mairaj Ahmad 所说，只需将type='button' 从type='submit 更改为
错误是 1. type="button" 2. documentgetElementById 3. 解析整数。工作网址：codepen.io/SESN/pen/xOOGZG

标签： javascript html

【解决方案1】：

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

【讨论】：

如何更改此按钮名称？

【解决方案2】：

您正在使用type="submit"，这就是刷新页面的原因。

当button被点击时，你需要使用type="button"来调用你的javascript function。

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

另外，您使用的是document.getElementByID，它不是函数，而是document.getElementById。

您还需要将parse 的值设置为int 为added，否则值将只是concatenated 而不是added。

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

【讨论】：