Onclick和Onload之间的不同行为

Question

我有一个索引网页，上面有一个提交按钮。当我单击该按钮时，我想运行一个向div添加字符串的函数（使用onclick（））。但是，它只会闪烁然后消失。但是，当我使用window.onload时，它会停留在页面上，正如我想的那样。这是代码：

<div>
  <form>
    <input type="submit" onclick="test();" value="Add Text">
  </form>
  <div id="holder"></div>
</div>

我在页面中包含以下“脚本”标记。

当我使用它时，它会停留在页面上（应该如此）：

window.onload = function(){
  $('#holder').html("Hello <b>world</b>!");
}

但这在加载后就消失了：

function test(){
  $('#holder').html("Hello <b>world</b>!");
}

谢谢！

Answer 1

您使用的按钮是表单提交按钮，它将提交表单并重新加载页面。

而是使用<button>按钮

使用

<button onclick="test();">Add Text</button>

而不是

  <form>
    <input type="submit" onclick="test();" value="Add Text">
  </form>