按钮单击功能内的div元素的文本更改不会永久反映

Question

我在函数内部按钮点击时更改div元素的文本，但它不会永久反映。我的意思是点击按钮它变为＆＃34;新文字＆＃34;但它又变成了旧文本＆＃34;。这是我的代码。

<form>
<input type="submit" onclick="myFun()" value="clickMe"/>
</form>
<div id="div1">old text</div>

这是javascript函数。

function myFun(){
document.getElementById("div1").innerHTML = "New text!"}

Answer 1

它应该是button类型，而不是submit。提交将刷新您的页面，您的更改将丢失。或者您只需使用button元素而不是input字段

function myFun() {
  document.getElementById("div1").innerHTML = "New text!"
}

<form>
  <button onclick="myFun()">clickMe</button>
</form>
<div id="div1">old text</div>

Answer 2

更改元素属性后，刷新浏览器后会刷新为先前的状态。要进行永久性更改，您需要修改源。

如果您希望用户在不刷新页面的情况下填写表单，则应将返回添加到onclick属性，如下所示：

<input type="submit" onclick="return myFun()" value="clickMe"/>

然后将您的JavaScript函数 myFun（）修改为返回false; ：

function myFun(){
    document.getElementById("div1").innerHTML = "New text!";
    return false;
}

它应该解决你的问题：）

Answer 3

您正在使用提交，因此它将刷新页面（重定向的网址），因此使用按钮或添加return false就可以了

<input type="submit" onclick="myFun();return false;" value="clickMe"/>