HTML 如何使用 OnClick 事件调用 JS 函数

在本文中，我们将介绍如何通过 OnClick 事件调用 JavaScript（JS）函数。通过使用HTML中的OnClick事件，我们可以在用户点击特定元素时调用JS函数，实现各种交互功能和动态效果。

阅读更多：HTML 教程

OnClick 事件简介

OnClick是HTML中的一个常见事件，它用于定义当用户在某个元素上点击时所触发的操作。可以将OnClick事件绑定到HTML元素的属性上，比如按钮、链接、图片等等。

当用户点击被绑定OnClick事件的元素时，浏览器会执行预设的JavaScript函数，并执行定义在该函数内的操作或逻辑。通过合理的使用OnClick事件，我们可以实现许多很酷的互动特效。

使用OnClick调用JS函数

要使用OnClick调用JS函数，我们需要遵循以下步骤：

在HTML中定义一个可触发OnClick事件的元素，比如按钮。例如：

<button onclick="myFunction()">点击我</button>

在JavaScript部分定义待调用的函数。例如：

<script>
function myFunction() {
    alert("Hello World!");
}
</script>

在这个例子中，我们定义了一个名为”myFunction”的函数，函数内部使用alert函数弹出一个对话框，显示”Hello World!”。

当用户点击按钮时，浏览器会执行OnClick事件绑定的函数，即调用myFunction函数，并显示”Hello World!”。

我们可以通过这种方式绑定多个OnClick事件，以及调用多个不同的JS函数，实现丰富多样的互动效果。

示例

为了更好地理解OnClick事件的使用，我们来看几个示例：

示例1：改变元素样式

<!DOCTYPE html>
<html>
<head>
<style>
    .change {
        color: blue;
    }
</style>
</head>
<body>

<p id="demo">这是一个段落。点击下方按钮改变颜色。</p>

<button onclick="changeColor()">点击改变颜色</button>

<script>
function changeColor() {
    document.getElementById("demo").classList.toggle("change");
}
</script>

</body>
</html>

在这个示例中，我们定义了一个段落元素，初始颜色为黑色。当用户点击按钮时，通过调用changeColor函数，段落元素的文字颜色将切换为蓝色，并反复切换。

示例2：显示隐藏元素

<!DOCTYPE html>
<html>
<body>

<button onclick="toggleElement()">点击显示/隐藏元素</button>
<p id="demo" style="display:none;">这是一个隐藏的段落。</p>

<script>
function toggleElement() {
    var x = document.getElementById("demo");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}
</script>

</body>
</html>

在这个示例中，我们定义了一个段落元素，并初始将其隐藏。当用户点击按钮时，通过调用toggleElement函数，段落元素将切换显示和隐藏状态。如果元素是隐藏的，则显示它，反之亦然。