为什么这个 HTML/JS 在更改内部 HTML 后会恢复到原来的状态？

【问题标题】：Why does this HTML/JS revert back to the original after changing the inner HTML?为什么这个 HTML/JS 在更改内部 HTML 后会恢复到原来的状态？
【发布时间】：2013-09-07 19:30:43
【问题描述】：

我开始学习 JavaScript，我想知道为什么这不会永久地使“短暂”出现在按钮之前，以及为什么它会在按下按钮之前恢复到原始 HTML 页面？

index.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="mind.js"></script>
</head>
<body>
    <h1 id = "identifier"></h1>
    <form>
        <button value = "button!" onclick="doSomething()"> </button>
    </form>
</body>
</html>

mind.js

function doSomething() {
    document.getElementById("identifier").innerHTML = '<i>Ephemeral</i>';
}

【问题讨论】：

谁添加了语法高亮？？？？

标签： javascript html innerhtml

【解决方案1】：

因为您正在提交表单，它正在刷新页面。如果您还不想提交，请将 return false 添加到内联处理程序。

<button value = "button!" onclick="doSomething(); return false;"> </button>

或者在调用前加上return，在函数中加上return false。

<button value = "button!" onclick="return doSomething();"> </button>

function doSomething() {
    document.getElementById("identifier").innerHTML = '<i>Ephemeral</i>';
    return false;
}

【讨论】：

更好的是，完全去掉表单标签。我一开始就看不出他们在那里的意义。
@David：是的，是的。我假设 OP 对form 有最终目的。
@David 竖起大拇指，因为我在一个类似的问题上与所有人争吵。