buttonタグをクリックする度に画面がリロードされる

<button>タグのonclickイベントをJavascriptで処理しようとコード書いて動かしてみたら、毎回ボタンをクリックする度に画面がリロードされて、うまく動かない…。

調べてみたら基礎的なことだったけど、知らなかったのでメモ。

原因はbuttonタグのtype属性

そもそも、<button>タグを正しく理解していなかったので、以下に簡単なリファレンスを。

<button>

<button>タグは、ボタンを表示するタグ。<form>タグと合わせて使うのが基本。

属性

属性	説明	値
name	ボタンの名前	ボタンの名前
value	ボタンの値	値
type	ボタンの種類	submit（初期値） reset button
disabled	操作を無効にする	–

以下は、HTML5で追加されたタグ。

属性	説明	値
autofocus	自動フォーカスを指定する	–
form	<form>タグとの関連付け （指定することで<form>～</form>の中に<button>タグがなくても関連付けできる）	関連付けたい<form>タグのid名
formaction	送信先URL	URL
formenctype	送信データの形式	application/x-www-form-urlencoded（初期値） multipart/form-data text/plain
formmethod	送信方法（HTTPメソッド）	get（初期値） post
formnovalidate	入力されたデータの妥当性を確認しない	–
formtarget	フォーム送信するターゲット先	_blank _self _parent _top

で、何が悪かったのか？

問題の事象が発生した時のコードは以下のような感じだった。

<form action="">
  <button onclick="abc()">
</from>

ここで、ボタンの動作としては、クリックする度にフォームの入力項目を変更するようなJavascriptを書いていたが、毎回リロードされ、うまくJavascriptが動かない…。

上記のリファレンスを理解していれば、すぐに分かったのだが、原因はtype属性の初期値がsubmitであることだった。

送信ボタンと同じ扱いであったため、毎回フォーム送信が行われており、ページがリロードされる動きとなっていた。

なので、type属性をbuttonに変更することで解決した。