html button click

作者：我视你如狗ㄟ发布日期:2025-10-08 浏览:46

<!DOCTYPE html>
<html>
<head>
    <title>HTML Button Click Example</title>
    <script>
        // 定义一个函数，在按钮点击时执行
        function buttonClicked() {
            // 获取页面中的段落元素，并修改其文本内容
            document.getElementById("demo").innerHTML = "按钮被点击了！";
        }
    </script>
</head>
<body>

    <!-- 创建一个按钮，当点击时调用 JavaScript 函数 -->
    <button onclick="buttonClicked()">点击我</button>

    <!-- 用于显示按钮点击后的内容 -->
    <p id="demo"></p>

</body>
</html>

解释说明：

HTML 结构:
- <button> 标签定义了一个按钮，点击按钮会触发 onclick 事件。
- <p> 标签用于显示按钮点击后的信息，初始为空。
JavaScript 部分:
- buttonClicked() 是一个 JavaScript 函数，当按钮被点击时会被调用。
- document.getElementById("demo").innerHTML = "按钮被点击了！"; 修改了 <p> 元素的文本内容，显示“按钮被点击了！”。
效果:
- 当用户点击按钮时，页面上的段落会更新为“按钮被点击了！”。

上一篇：html横线代码

下一篇：html框架布局网页代码