<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>JavaScript</title>
  <script>
    async function getMessage() {
      const id = document.getElementById("userid").value;
      if (id === "") {
        throw new Error("User ID is required."); 
      }
      return "Hello!";
    }
    async function show() {
      try {
        const message = await getMessage();
        console.log(message);
      } catch(error) {
        console.log("Error: " + error.message);
      }
    }
    function initiate() {
      const button = document.getElementById("button");
      button.addEventListener("click", show);
    }
    window.addEventListener("DOMContentLoaded", initiate);
  </script>
</head>
<body>
  <section>
    <form name="myform">
      <p><input type="text" name="user" id="userid"></p>
      <p><button type="button" id="button">Run Task</button></p>
    </form>
  </section>
</body>
</html>