【JavaScript】ボタンをクリックした時に処理が完了するまで再度ボタンを押せないようにしたい

ボタンを連打できないようにしたい

ボタンをクリックした時に処理が完了するまで再度ボタンを押せないようにするには、ボタンを非活性化（disabled）し、処理が完了した後に再度活性化させることができます。

以下は、コードにボタンを非活性化および活性化させるための変更例です。

ボタン要素を取得する

ボタン要素を取得します。HTMLにおいて、ボタンにid属性を追加し、JavaScriptで取得できるようにします。

例えば、ボタンにid="reserveButton"を追加します。

<button id="reserveButton" onclick="reserve()">予約</button>

ボタンを非活性化（disabled）

JavaScriptコード内でボタンを非活性化（disabled）します。処理が開始した時点でボタンを非活性化し、処理が完了した後に再度活性化させます。

reserve()関数内で以下のようにボタンを非活性化します。

function reserve() {
  // ボタンを取得
  var reserveButton = document.getElementById('reserveButton');

  // ボタンを非活性化
  reserveButton.setAttribute("disabled", true);
  // ボタンを薄くするためのクラスを追加
  reserveButton.classList.add('disabled-button');

  var selectedDate = document.getElementById('dateDropdown').value;

  var formData = new FormData();
  formData.append("selectedDate", selectedDate);

  fetch(endpoint, {
    method: "POST",
    body: formData
  })
  .then(response => {
    if (!response.ok) {
      throw new Error('ネットワークエラーが発生しました');
    }
    return response.text();
  })
  .then(result => {
    console.log('レスポンスデータ:', result);
    document.getElementById('result').innerHTML = result;

    // 処理が完了したらボタンを再度活性化
    reserveButton.removeAttribute("disabled");
    // ボタンの薄くするクラスを削除
    reserveButton.classList.remove('disabled-button');
    // リストを再読み込み
    reloadDropdown();
  })
  .catch(error => {
    console.error('エラー:', error);
  });
}

まとめ

このように変更することで、ボタンをクリックして処理が実行される間はボタンが非活性化され、処理が完了すると再度活性化されるようになります。これにより、ユーザーがボタンを連続してクリックすることが防げます。