HTML Onclick 事件

17 Mar 2025 | 5 分钟阅读

HTML on-click 事件作用于 HTML 元素和输入标签。我们可以点击输入标签、按钮和其他 HTML 元素来操作功能。功能的脚本可以是 HTML 或 JavaScript 代码。如果 on-click 事件的脚本复杂，请使用 JavaScript；否则，请在 HTML 标签中使用。

语法

以下语法用于 HTML 元素或标签中的 HTML onclick 事件。

描述

事件可以使用脚本代码或在 HTML 标签中操作的基本功能。
事件可以使用函数名和 JavaScript 中的函数。
onclick 事件属性受所有 HTML 标签支持，除了 <br>、<head>、<html>、<base>、<bdo>、<iframe>、<script>、<style>、<meta>、<param> 和 <title>。

示例

以下示例展示了带有简单脚本操作的 html onclick 函数。

示例 1

以下示例在带有基本代码的 html 标签中操作点击事件。我们可以使用按钮进行脚本操作。

<!DOCTYPE html>
<html>
<head>
<title> Html onclick event </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
#b1{
background-color: orange;
}
#b2{
background-color: aqua;
</style>
</head>
<body>
<h3 class = "class1">
Html onclick event
</h3>
<p class = "class2">
Html onclick event helps to operate the script function.
<br>
We can use Button for the onclick event.
</p>
<p id = "times_today"></p>
<br>
<!-- Button used for the onclick function -->
<button id = "b1" onclick = "getElementById('times_today').innerHTML= Date();"> Click to Get Time </button>
<button id = "b2" onclick = "alert('Hello Students, Welcome to Html tutorial!!');"> Click to Get Alert Output </button>
</body>
</html>

输出

输出显示了按钮上的 onclick 事件及其操作。

示例 2

以下示例在带有脚本代码的 html 标签中操作 onclick 事件。我们可以使用带有 submit 类型的输入标签进行脚本操作。

<!DOCTYPE html>
<html>
<head>
<title> Html onclick event </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
#b1{
background-color: yellow;
}
#b2{
background-color: skyblue;
</style>
</head>
<body>
<h3 class = "class1">
Html onclick event
</h3>
<p class = "class2">
We can use the input tag with the submit type for the onclick event.
</p>
<p id = "times_today"></p>
<br>
<!-- Submit type in input tag used for the onclick function -->
<input id = "b2"  type = "submit" value = "Click Here" onclick = "getElementById('times_today').innerHTML= 'Hello Student';">
<input type = "submit" id = "b1" value = " Click to Get Alert Output " onclick = "alert('Hello Students, Welcome to onclick event with submit type in the tag!!');">
</body>
</html>

输出

输出显示了输入 submit 类型上的 onclick 事件及其操作。

示例 3

以下示例在带有脚本代码的 html input 标签中操作 onclick 事件。我们可以使用带有 text 类型的输入标签进行脚本操作。

<!DOCTYPE html>
<html>
<head>
<title> Html onclick event </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
#b1{
background-color: #edeaea;
}
#b2{
background-color: #e4f7f2;
}
</style>
</head>
<body>
<h3 class = "class1">
Html onclick event
</h3>
<p class = "class2">
We can use an input tag with text type for the onclick event.
</p>
<p id = "times_today" style = "color:red;"></p>
<br>
<!-- text type in input tag used for the onclick function -->
<input type = "text" id = "b1" onclick = "alert('Hello Students, Learn Html Event Attribute!!');" placeholder = "Write Something...">
<input id = "b2" type = "text" onclick = "getElementById('times_today').innerHTML= 'Please Write Your Name';" placeholder = "Write Something...">
</body>
</html>

输出

输出显示了输入 text 类型上的 onclick 事件及其操作。

示例 4

以下示例在带有脚本代码的 html input 标签中操作 onclick 事件。我们可以使用带有 text 类型的输入标签进行脚本操作。

<!DOCTYPE html>
<html>
<head>
<title> Html onclick event </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
#b1{
background-color: #edeaea;
}
#b2{
background-color: #e4f7f2;
}
</style>
</head>
<body>
<h3 class = "class1">
Html onclick event
</h3>
<p class = "class2">
We can use an input tag with a radio button and a checkbox for onclick events.
</p>
<!-- Checkbox type in input tag used for the onclick function -->
<b> Hobbies : </b>
<input type = "checkbox" id = "b1" onclick = "alert('Hello Student, You Select Reading!!');" placeholder = "Write Something...">
<lable> Read </lable>
<input type = "checkbox" id = "b1" onclick = "alert('You Select Dancing!!');" placeholder = "Write Something...">
<lable> Dance </lable>
<input type = "checkbox" id = "b1" onclick = "alert('You Select Playing!!');" placeholder = "Write Something...">
<lable> Play </lable>
<br>
<p id = "times_today" style = "color:red;"></p>
<!?Radio button type in input tag used for the onclick function -->

<b> Gender : </b>
<input id = "b2" type = "radio" onclick = "getElementById('times_today').innerHTML= 'You Select Male';" placeholder = "Write Something...">
<lable> Male </lable>
<input id = "b2" type = "radio" onclick = "getElementById('times_today').innerHTML= 'You Select Female';" placeholder = "Write Something...">
<lable> Female </lable>
</body>
</html>

输出

输出显示了输入标签上的 onclick 事件及其操作。

示例 5

以下示例在带有 JavaScript 函数的 HTML 标签中操作点击事件。我们可以使用带有 submit 和 button 类型的输入标签进行脚本操作。我们可以使用 JavaScript 代码进行 onclick 事件。

<!DOCTYPE html>
<html>
<head>
<title> Html onclick event </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
#b1{
background-color: orange;
}
#b2{
background-color: skyblue;
</style>
</head>
<body>
<h3 class = "class1">
Html onclick event
</h3>
<p id = "class2">
We can use an input tag with submit and button types for the onclick event.
</p>
<p id = "times_today"> Learn the HTML onclick Event</p>
<br>
<!-- Submit type in input tag used for the onclick function -->
<input id = "b1"  type = "submit" value = "Click Here to Add Style" onclick = "click1();">
<!-- button type in input tag used for the onclick function -->
<input type = "button" id = "b2" value = " Click Button" onclick = "click2();">
<script>
function click1(){
document.getElementById("times_today").style.color = "red";
document.getElementById("times_today").style.fontSize = "20px";
document.getElementById("times_today").style.border = "2px solid black";
}
function click2(){
document.getElementById("times_today").style.display = "none";
document.getElementById("class2").style.color = "blue";
document.getElementById("class2").style.fontSize = "18px";
}
</script>
</body>
</html>

输出

输出显示了带有 JavaScript 代码的输入标签上的 onclick 事件。

结论

HTML 中的 onclick 函数对于用户和开发人员来说非常有用，可以验证并通知表单的指导方针。我们可以使用 html 中的 onclick 事件属性更改样式、操作和 javascript 函数。

下一个主题HTML 图片

HTML Onclick 事件

语法

描述

示例

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

HTML Onclick 事件

语法

描述

示例

结论

相关帖子

HTML 中的 p 是什么意思

如何在 HTML 中创建下拉列表

在 HTML 中添加图标

如何将 HTML 转换为 PDF

如何创建 HTML 表单

HTML 图片大小

HTML Valign

如何在 HTML 中静音视频

HTML 边距

HTML 表格行高

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器