プログラミング

buttonタグで勝手にリロードされる【解決策】

buttonタグ
 

みなさんこんにちは!ワトスンです。
今回は、、

<button>タグをクリックしたらページがリロードされるのを改善したい!

といった悩みに答えます。

 

■読んでほしい人
HTMLやjavascriptの上達を目指す人

 

さっそく簡潔に答えをお出しします。

 

buttonタグのtype属性をきちんと指定しよう

buttonタグにはtype属性というものがあります。

押すと勝手にリロードされてしまうのは、type属性の影響が出ているからです。

詳しく解説していきます。

 

原因はtype属性を指定していないから

きちんとtype属性は指定していますか?!

buttonタグのtype属性の初期値は「submit」です。

type属性に何も指定していないと初期値のsubmitになってしまいます

submitは送信を行う際に使用し、情報を他のページなどに送る際に使います。
そのためsubmitは送信の際にリロードされてしまいます

 

type属性に”button”を設定する

buttonタグのtype属性は3つあります。

type=”submit”:送信ボタン。フォームの入力内容を送信するときに使用する。
type=”reset”:リセットボタン。フォームの入力内容をリセットするときに使用する。
type=”button”:汎用的なボタン。JavaScriptなどの処理を呼び出すときに使用する。

この記事を見ている人はリロードさせずに、そのページでbuttonタグを押したときに何か処理したいと考えている方がほとんどだと思います。

buttonタグを押して何か処理を実行したい場合は「type=”button”」を指定しましょう。

その他なにか疑問点がありましたらコメントまたはTwitterのDMでご連絡ください!

以上です。

コメントを残す

メールアドレスが公開されることはありません。

関連記事