onclick在html中用法

作者：—上花′Ing 发布日期:2026-03-03 浏览:72

<!DOCTYPE html>
<html>
<head>
    <title>onclick 示例</title>
</head>
<body>

<!-- 示例1: 直接在HTML元素中使用onclick属性 -->
<button onclick="alert('你点击了按钮!')">点击我</button>

<!-- 示例2: 使用JavaScript函数 -->
<script>
function showMsg() {
    alert('这是通过函数显示的消息!');
}
</script>
<button onclick="showMsg()">点击显示消息</button>

<!-- 示例3: 更复杂的操作，如修改页面元素 -->
<p id="demo">这是一个段落。</p>
<script>
function changeContent() {
    document.getElementById("demo").innerHTML = "内容已更改!";
}
</script>
<button onclick="changeContent()">点击更改段落内容</button>

</body>
</html>

解释说明：

示例1：直接在HTML元素（如<button>）中使用onclick属性，并在属性值中编写要执行的JavaScript代码。当用户点击按钮时，会弹出一个警告框显示消息。
示例2：定义一个JavaScript函数showMsg()，并在onclick属性中调用该函数。这种方式使得代码更清晰，特别是当需要执行较多逻辑时。
示例3：展示了如何通过onclick事件来修改页面中的元素内容。点击按钮后，段落的内容会被更新为新的文本。

上一篇：html 下拉列表

下一篇：html 在线运行