从 onClick 函数使用 .innerHTML

Question

我在通过单击按钮调用的 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 函数更改文本？或者还有其他方法可以完成这项任务吗？

Answer 1

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

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

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

您也可以将该按钮保留为提交按钮并阻止该按钮的默认行为，但如果您不打算提交表单，那么最好不要一开始就将其设为提交按钮并将其设为常规按钮。

Answer 2

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

您需要阻止提交表单。类似于：

onClick="change(); return false;"

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

从 onClick 函数使用 .innerHTML

Using .innerHTML from an onClick function

javascript

onclick

innerhtml