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>