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>