htmlのイベントで、非同期インライン処理

Posted at 2025-06-24

どうしてもインラインで書きたい人へのサンプル

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>1秒待ってからログ</title>
</head>
<body>
  <button id="logButton"
      onclick=" (async()=>
                  {
                      await waitOneSecond();
                      logMessage();
                   }
                 )()">ログを出す
  </button>

  <script>
    // 1秒待つ処理
    function waitOneSecond() {
      return new Promise(resolve => {
        setTimeout(resolve, 1000);
      });
    }

    // ログを出す処理
    function logMessage() {
      alert("1秒後に表示されたログ");
    }

   /* document.getElementById("logButton").addEventListener("click", async () => {
      await waitOneSecond();
      logMessage();
    });*/
  </script>
</body>
</html>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up