在 onClick 函数中使用 .innerHTML答案

【问题标题】：Using .innerHTML from an onClick function在 onClick 函数中使用 .innerHTML
【发布时间】：2015-05-01 02:00:35
【问题描述】：

我在通过单击按钮调用的 javascript 函数中使用 .innerHTML 时遇到问题。在短暂闪烁的一秒钟内，我可以看到调用了该函数，并且文本发生了变化，但随后文本又恢复了。

<html>
<head>
</head>

<body>

<form>
     <input type="submit" value="Change the Text" onClick="change()">
</form>

<div id="ToBeChanged"> Hello, World </div>

<script>
 function change(){
     document.getElementById("ToBeChanged").innerHTML = "New Text"; 
 };
</script>

</body>
</html>

当然，如果我只是在函数之外使用 .innerHTML，它会毫无问题地更改文本，并且不会恢复为旧文本。有没有办法使用 .innerHTML 从 onClick 函数更改文本？或者我应该有另一种方式来完成这项任务吗？

【问题讨论】：

你显示的代码有什么问题？
在这里工作正常jsfiddle.net/mjc6fq97/2

标签： javascript onclick innerhtml

【解决方案1】：

文本恢复，因为您有一个 input type=submit，它基本上是调用 javascript 函数，然后提交表单，这会重新加载页面。

您需要阻止提交表单。比如：

onClick="change(); return false;"

但是，也许您的按钮不应该以提交开头...

【讨论】：

啊，我明白了！谢谢。此时我实际上不需要提交表单，因此只需将类型切换为“按钮”即可。

【解决方案2】：

通常，当有人说提交按钮事件处理程序中的代码不起作用时，问题是按钮导致页面重新加载，从而使您认为您的代码不起作用。事实上，您的代码可能正在运行，但是页面会立即重新加载，因此您永远看不到代码的效果。

如果确实发生了这种情况，您可以通过将按钮更改为常规按钮（而不是提交按钮）来防止页面重新加载。

<input type="button" value="Change the Text" onClick="change()">

您也可以将按钮保留为提交按钮并阻止按钮的默认行为，但如果您不打算提交表单，那么最好先停止将其设置为提交按钮，然后使其成为常规按钮。

【讨论】：

谢谢——是的，这就是我们所需要的。将其从“提交”更改为“按钮”类型可以解决问题。