JavaScript innerHTML赋值仅短暂显示，页面为何自动重置？

我编写了如下JavaScript函数，原本要在HTML页面写入值：

function f(){var aa;aa = document.getElementById("a");document.getElementById('resultarea').innerHTML += aa;}

该函数能运行，但值仅显示数毫秒后就消失，页面自动重置。相关HTML代码如下：

<div><form><label for="a">a:</label><input type="number" name="a" id="a" /><button onclick="f()">Calculate</button></form></div><div id="resultarea"></div>

请问问题出在哪里？为什么页面会自动重置？

页面自动重置的根本原因 #

按钮位于<form>标签内，浏览器默认会把未指定type的按钮识别为submit类型，点击后会触发表单的默认提交行为：浏览器会尝试将表单数据发送到服务器（由于没设置action属性，会提交到当前页面），导致页面重新加载，刚写入的内容自然就被清空了。

另外你的JS函数还存在一个小问题：document.getElementById("a")获取的是输入框的DOM元素对象，而非输入框内的实际数值，所以即使页面不刷新，你看到的也会是[object HTMLInputElement]，而不是用户输入的数字。

具体解决方法 #

方法1：指定按钮类型为button #

直接给按钮添加type="button"，彻底避免触发表单提交：

<button type="button" onclick="f()">Calculate</button>

同时修正JS函数，获取输入框的值：

function f(){
  var aa = document.getElementById("a").value;
  document.getElementById('resultarea').innerHTML += aa;
}

方法2：在函数中阻止默认提交行为 #

如果需要保留按钮的submit类型（比如后续要用到表单提交），可以在点击事件中阻止默认行为：

function f(event){
  // 阻止表单默认提交动作
  event.preventDefault();
  var aa = document.getElementById("a").value;
  document.getElementById('resultarea').innerHTML += aa;
}

对应的HTML按钮需要传递event参数：

<button onclick="f(event)">Calculate</button>

方法3：移除<form>标签（可选） #

如果你的页面不需要表单功能，直接删掉<form>标签也能解决页面刷新的问题，同时记得修正JS函数获取输入值的代码。

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