如何使JavaScript计算结果显示在页面第三个输入框而非新页面？

问题出在两个核心点上，直接修改如下即可解决：

• 提交按钮会触发表单默认跳转，导致页面刷新；document.write()会清空当前页面，这两个行为都不是我们需要的。
• 要把结果显示在第三个输入框，需要给它加标识并直接赋值，同时阻止表单跳转。

修改后的完整代码 #

HTML #

<form>
  <input type="text" id="f_num" placeholder="输入第一个数字"><br><br>
  <input type="text" id="s_num" placeholder="输入第二个数字"><br><br>
  <input type="button" value="乘法" onclick="mul()">
  <input type="button" value="除法" onclick="div()"><br><br>
  <input type="text" id="result" placeholder="计算结果" readonly>
</form>

JavaScript #

function mul(){
    var a = parseInt(document.getElementById("f_num").value);
    var b = parseInt(document.getElementById("s_num").value);
    if (!isNaN(a) && !isNaN(b)) {
        var res = a * b;
        document.getElementById("result").value = res;
    } else {
        document.getElementById("result").value = "请输入有效数字";
    }
}
function div(){
    var a = parseInt(document.getElementById("f_num").value);
    var b = parseInt(document.getElementById("s_num").value);
    if (!isNaN(a) && !isNaN(b) && b !== 0) {
        var res = a / b;
        document.getElementById("result").value = res;
    } else if (b === 0) {
        document.getElementById("result").value = "除数不能为0";
    } else {
        document.getElementById("result").value = "请输入有效数字";
    }
}

关键修改说明 #

1. 把按钮类型从submit改成button，彻底避免表单提交导致的页面跳转。
2. 给第三个输入框添加id="result"，方便JS定位元素；加上readonly属性防止用户手动修改结果。
3. 删掉document.write()，改为直接给result输入框的value属性赋值，实现结果在原页面显示。
4. 增加输入校验：判断输入是否为有效数字，除法场景额外校验除数不为0，避免出现错误结果或异常。

内容的提问来源于stack exchange，提问作者HafizAlFahim