javascript - 在同一页输出表单结果

Question

我试图在与表单相同的页面上显示表单结果，但是当我单击“获取总计”按钮时，我看到结果短暂出现然后消失。我的结果也关闭了，我试图将我的变量加在一起，但我得到了一个连接。

<form id="percentageBiz" method="post">
<input type="text" id="sum1">
<input type="text" id="sum2">
<input type="submit" onclick="total()" value="Get Total">

<div id="display" style="height: 50px; width: 100%;"></div>

<script>
function total(){
    var a = document.forms["percentageBiz"]["sum1"].value;
    var b = document.forms["percentageBiz"]["sum2"].value;
    //alert(a+b)
    var display=document.getElementById("display")
    display.innerHTML=a+b;
}
</script>

Answer 1

它闪烁是因为您没有做任何事情来阻止表单提交，而连接是因为您没有将值转换为数字。请注意，您可以使用 parseFloat如果你处理的是非整数而不是 parseInt正如我在下面使用的那样。

试试这个 jsFiddle example .

function total(){
    var a = document.forms["percentageBiz"]["sum1"].value;
    var b = document.forms["percentageBiz"]["sum2"].value;
    //alert(a+b)
    var display=document.getElementById("display")
    display.innerHTML=parseInt(a,10)+parseInt(b,10);
    return false;
}​

和

<form id="percentageBiz" method="post">
<input type="text" id="sum1">
<input type="text" id="sum2">
<input type="submit" onclick="return total()" value="Get Total">
</form>
<div id="display" style="height: 50px; width: 100%;"></div>​