javascript buttonをクリックするとリロード処理が行われる

作成日 2022.02.24
更新日 2022.12.17
html
html

javascriptで、buttonをクリックするとリロード処理が行われる場合の原因と対処法を掲載してます。原因は「button」の「type」属性のデフォルト値は「type=”submit”」となっているためです。ブラウザはchromeを使用しています。

1. 環境
2. リロードされるコード
3. 原因
4. 対処法

環境

ブラウザ chrome 108.0.5359.99

Javascript サンプル集はこちら

リロードされるコード

以下のコードのような「form」内にある「button」のクリックイベントを実行する処理で発生。

<form id="frm">
  <input id="txt" type="text" />
  <button id="btn">button</button>
</form>

<script>

// ボタンのクリックイベント
document.getElementById('btn').addEventListener('click',
  function(){
    document.getElementById('txt').value = 'test';
  }
)

</script>

「button」をクリックするたびにリロードされます。

原因

「button」の「type」属性は、指定しないと初期値は「type=”submit”」となるため。

対処法

「type」属性を「type=”button”」と指定する。

<form id="frm">
  <input id="txt" type="text" />
  <button id="btn" type="button">button</button>
</form>

<script>

// ボタンのクリックイベント
document.getElementById('btn').addEventListener('click',
  function(){
    document.getElementById('txt').value = 'test';
  }
)

</script>

実行結果をみると、リロードされていないことが確認できます。

「preventDefault()」で、formのデフォルトの動作をキャンセルしてもリロードは防げます。

<form id="frm">
  <input id="txt" type="text" />
  <button id="btn">button</button>
</form>

<script>

// ボタンのクリックイベント
document.getElementById('btn').addEventListener('click',
  function(event){
    document.getElementById('txt').value = 'test';
    event.preventDefault();
  }
)

</script>