javascript - フォーム要素の Javascript が失敗するのはなぜですか?

Question

最近、JS アプリのトラブルシューティングを行っているときに、前方を壁にぶつけてしまいました。それは次のようなものに要約されます: js をフォームの html 要素に配置すると、失敗するか、すぐに元に戻ります。どうしてこれなの？

失敗:

<div id="p1">Hello World!</div>
<form>
<button onclick='document.getElementById("p1").innerHTML="New text!";'>Change me</button
</form>

動作:

<div id="p1">Hello World!</div>
<button onclick='document.getElementById("p1").innerHTML="New text!";'>Change me</button

Answer 1

試す

<div id="p1">Hello World!</div>
<form method="post" onsubmit="return false;">
<button onclick='document.getElementById("p1").innerHTML="New text!";'>Change me</button>
</form>

フィドル