[HTML]buttonタグのonclickで画面遷移しない（サブミットの罠）

ここでは、解決までに１時間をほどかかったbuttonタグのonclickで画面遷移しなかった原因を紹介しています。

当たり前の人には当たり前でも、当たり前ではない人もいると思います。ポンコツの同志として、ともに知識をつけていきましょう。( ´∀｀ )

onclick で動かないHTML

次のHTMLは期待する動作にはなりません。こうして動かない間に壇蜜さんは人妻になってしまいました。

<form>
  <!-- 社長！壇蜜にチェックインできません -->
  <button onclick="location.href='danmitsu.html';">おまえにちぇっくい～～ん</button>
</form>

壇蜜にチェックインできなかった原因

サンプルのHTMLでは、formタグが存在しています。もしも、formタグさえ存在していなかったら壇蜜にチェックインできていたはずです。

そう、すべてはこのわけもわからず、適当にコピペしてきたformタグが悪かったのです。

しかし、formタグが存在していてもチェックインすることもできるのです。ですが、そんなの知らなかったので仕方がありません。なので、次回から、ちゃんとチェックインできるようにその方法をここに残しておきます。

button要素はデフォルトでサブミット

とのことのようです。したがって、次のように type 属性に button を設定するか、onclick のリターン値で false を返すようにすると form タグがあろうともチェックインできるようになります。

<button type="button" onclick="location.href='danmitsu.html';">おまえにちぇっくい～～ん</button>

<button onclick="location.href='danmitsu.html'; return false;">おまえにちぇっくい～～ん2</button>

壇蜜さん、ご結婚おめでとうございます。