表单内按钮结果显示不稳定

Question

为什么放置在表单内的唯一按钮会通过其 javascript 函数显示稳定的消息？

function myFunction() {
  document.getElementById("demo").innerHTML = "Hello Dear Visitor!";
}

<form onsubmit="myFunction()">
  <p> buttons inside the form does unstable result display</p>
  <input type="submit" class="buton" value="Submit" onclick="myFunction()">
  <button onclick="myFunction()"> Inside Form </button>
</form>
<hr>
<p> button outside the form does good result display</p>
<button onclick="myFunction()"> Outside Form </button>

<p id="demo"></p>

Answer 1

单击按钮会导致表单提交并导航到新页面， 这会导致显示的消息仅在页面刷新或导航离开之前出现很短的时间。 因此，您可能无法始终看到该消息。

要阻止表单提交并保留消息，需要阻止 默认表单提交行为。您可以通过在

return false;

函数末尾添加

myFunction()

或使用

event.preventDefault()

来完成此操作。

演示：

function myFunction(event) {
  document.getElementById("demo").innerHTML = "Hello Dear Visitor!";
  event.preventDefault();
}

<form onsubmit="myFunction(event)">
  <p> buttons inside the form does unstable result display</p>
  <input type="submit" class="buton" value="Submit" onclick="myFunction(event)"> 
  
  <button onclick="myFunction(event)"> Inside Form </button>
</form>
<hr>

<p id="demo"></p>