buttonタグで勝手にリロードされる【解決策】
みなさんこんにちは！ワトスンです。
今回は、、
＜button＞タグをクリックしたらページがリロードされるのを改善したい！
といった悩みに答えます。
■読んでほしい人
HTMLやjavascriptの上達を目指す人
さっそく簡潔に答えをお出しします。
buttonタグにはtype属性というものがあります。
押すと勝手にリロードされてしまうのは、type属性の影響が出ているからです。
詳しく解説していきます。
原因はtype属性を指定していないから
きちんとtype属性は指定していますか？!
buttonタグのtype属性の初期値は「submit」です。
type属性に何も指定していないと初期値のsubmitになってしまいます。
submitは送信を行う際に使用し、情報を他のページなどに送る際に使います。
そのためsubmitは送信の際にリロードされてしまいます。
buttonタグのtype属性は３つあります。
・type=”submit”：送信ボタン。フォームの入力内容を送信するときに使用する。
・type=”reset”：リセットボタン。フォームの入力内容をリセットするときに使用する。
・type=”button”：汎用的なボタン。JavaScriptなどの処理を呼び出すときに使用する。
この記事を見ている人はリロードさせずに、そのページでbuttonタグを押したときに何か処理したいと考えている方がほとんどだと思います。
buttonタグを押して何か処理を実行したい場合は「type=”button”」を指定しましょう。
その他なにか疑問点がありましたらコメントまたはTwitterのDMでご連絡ください！
以上です。
