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

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

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

原因はbuttonタグのtype属性

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

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

以下は、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に変更することで解決した。

中学生の時に初めてHTMLに触れてからホームページ制作を独学で始める。ベンチャー企業の営業、大手企業のPG・SEを経て、独立。現在はとある企業のCTOと、変な名前の会社の社長をしてる。 Output48 のすべての投稿を表示