js 按钮

作者：淡漠伤悲发布日期:2025-03-14 浏览:228

<!DOCTYPE html>
<html>
<head>
    <title>JS 按钮示例</title>
</head>
<body>

<!-- 创建一个按钮 -->
<button id="myButton">点击我</button>

<!-- 添加一个段落，用于显示按钮点击后的消息 -->
<p id="message"></p>

<script>
// 获取按钮元素
var button = document.getElementById("myButton");

// 获取用于显示消息的段落元素
var message = document.getElementById("message");

// 为按钮添加点击事件监听器
button.addEventListener("click", function() {
    // 当按钮被点击时，更新段落内容
    message.textContent = "按钮被点击了！";
});
</script>

</body>
</html>

解释说明：

HTML 部分:
- 使用 <button> 标签创建一个按钮，并给它一个 id 为 myButton。
- 使用 <p> 标签创建一个段落，用于显示按钮点击后的消息，并给它一个 id 为 message。
JavaScript 部分:
- 使用 document.getElementById 方法获取按钮和段落元素。
- 使用 addEventListener 方法为按钮添加一个点击事件监听器。
- 当按钮被点击时，更新段落的内容为“按钮被点击了！”。

这样，当用户点击按钮时，页面上的段落会显示一条消息。

上一篇：js 获取dom

下一篇：js select