【HTML / Javascript】button要素に含まれるdisabled属性の沼にはまった話。

HTML、Javascript、CSSを使って色々作っているわけだが、とにかく「button要素に含まれるdisabled属性」がややこしい。

最初は、下のような感じで処理を書いていたのだが、永遠にdisabledが効かない。コードは、かなり省略している。

<script>

  function Test() {

    // ボタンを非活性化
    document.getElementById('button_1').setAttribute("disabled", "");

    setTimeout(() => {

      // なんやかんや処理

      // ボタンを活性化
      document.getElementById('button_1').removeAttribute("disabled");

    }, 1000);

  }

</script>

個人的には、setTimeout()が悪さをしているのかと思ったが、リファレンスを見てもよくわからない。かれこれ３時間は格闘したが、明確な解決方法は見つからず。

ふと、関数の中に関数をかませてやれば、上手くいくのではないかと思って書いてみたのが、以下のコードである。

<script>

  // ボタンを非活性化させる関数
  function disableButtons() {

    // ボタンを非活性化
    document.getElementById('button_1').setAttribute("disabled", "");

  }

  // ボタンを活性化させる関数
  function enableButtons() {

    // ボタンを活性化
    document.getElementById('button_1').removeAttribute("disabled");

  }

  function Test() {

    // ボタンを非活性化
    disableButtons();

    setTimeout(() => {
      
      // なんやかんや処理
      
      // ボタンを活性化
      enableButtons();

    }, 1000);

  }

</script>

これがなんと動くのですな。プロのエンジニアになる人は、これらの違いがなぜ生まれるのかを理解しなければ仕事にならないと思うが、しょせんは素人の遊びなので、動いたら良しとする。

とはいっても、どうして関数をかませたら上手く動くのかは気になるもので。その道のプロがこの note を見ていたら、ぜひご教示いただけると嬉しい。

個人的には、画面の更新タイミングか、実行されるコードの優先順位・処理順の問題かとは思っているが、それ以上は分からん。