显示 Toast 消息

本课属于 Coddy HTML 学习旅程的“JavaScript 实战”单元。第 11 课，共 27 课。

挑战

简单

创建一个表单，提交后显示成功消息。页面会显示一条提示消息，告知提交成功，然后在 3 秒后消失。

在 JavaScript 中完成以下步骤：

添加事件监听器：
- 获取 form 元素，并将它存储在一个变量中
- 获取 toast 元素，并将它存储在一个变量中
- 为表单添加一个 "submit" 事件监听器
在事件监听器中：
- 使用 event.preventDefault() 阻止页面刷新
- 通过添加 "show" 类来显示提示消息
- 从提示消息中移除 "hidden" 类

亲手试试

<!DOCTYPE html>
<html>
<head>
  <title>Form with Toast</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h2>Subscribe to our Newsletter</h2>
    <form id="myForm">
      <input type="text" id="name" placeholder="Enter your name">
      <button type="submit">Submit</button>
    </form>
  </div>

  <!-- 弹出提示 -->
  <div id="toast" class="toast hidden">Form submitted successfully!</div>

  <script src="script.js"></script>
</body>
</html>