数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何使用 JavaScript 在按钮中添加 onclick 事件？
onclick 事件通常发生在用户点击元素时。它允许程序员在点击元素时运行 JavaScript 函数。此事件可用于验证表单、显示警告消息等等。
可以使用 JavaScript 将此事件动态添加到任何元素。除了 <html>、<head>、<title>、<style>、<script>、<base>、<iframe>、<bdo>、<br>、<meta> 和 <param>，它支持所有 HTML 元素。
在 HTML 中，可以使用 onclick 属性并将其与 JavaScript 函数关联。为了提高灵活性，也可以使用 JavaScript 的 addEventListener() 方法并向其传递点击事件。
以下是向 HTML 元素添加 onclick 事件的语法。
<element onclick = "function()">
如果要在按钮中包含 onclick，则必须将 onclick 事件属性添加到 <button> 元素。在本教程中，我们将介绍两种在 JavaScript 中为按钮执行点击事件的不同方法。
object.onclick = function() { myScript };
object.addEventListener("click", myScript);
向 HTML 文档添加“onclick”事件
点击按钮时，onclick 事件会触发特定函数。这可能是用户提交表单时，更改网页上的某些内容时，或执行类似操作时。我们将要运行的 JavaScript 函数放在按钮的开始标签内。
示例
以下示例包含一个按钮和一个 JavaScript 函数，该函数在点击按钮时显示隐藏的消息。
<!DOCTYPE html>
<html>
<head>
<title>How to add onclick in a Button using JavaScript?</title>
<style>
button{
background:lightgreen;
color:darkolivegreen;
font-weight:550;
}
</style>
</head>
<body>
<p>Do you know the significance of Diwali? Click the button to know.</p>
<button onclick="showmessage()">Click here</button>
<p id="hiddentext"></p>
<script>
function showmessage() {
document.getElementById("hiddentext").innerHTML = "In northern India, they celebrate the story of King Rama's return to Ayodhya after he defeated Ravana by lighting rows of clay lamps. Southern India celebrates it as the day that Lord Krishna defeated the demon Narakasura. Diwali symbolizes the victory of light over darkness and good over evil.";
}
</script>
</body>
</html>
示例
在这个例子中，我们将向几个按钮添加 onclick 属性，并编写 JavaScript 函数来更改字体的颜色和大小。
<!DOCTYPE html>
<html>
<head>
<title>How to add onclick in a Button using JavaScript?</title>
<style>
body {
background-color:azure;
margin:20px;
}
p {
font-size: 20px;
}
button {
padding: 7px;
border-radius: 10px;
cursor: pointer;
}
button.blue {
background-color: #3498db;
}
</style>
</head>
<body>
<div>
<p id="name">Sample Text</p>
<button onclick="changeColor()">Change text color to Blue</button>
<button onclick="changeSize()">Increase text size</button>
<button onclick="reset()">Reset</button>
</div>
<script>
function changeColor() {
document.getElementById("name").style.color = "blue";
}
function changeSize() {
document.getElementById("name").style.fontSize = "60px";
}
function reset() {
document.getElementById("name").style.color="black";
document.getElementById("name").style.fontSize="20px";
}
</script>
</body>
</html>
使用“click”事件监听器
在这个例子中，我们将使用“click”事件监听器来更改 <div> 元素的背景颜色和边框属性。由于按钮的开始标签中没有 JavaScript 代码，因此必须在脚本中选择按钮和 <div> 元素。
示例
<!DOCTYPE html>
<html>
<head>
<title>How to add onclick in a Button using JavaScript?</title>
<style>
body {
background-color:floralwhite;
margin:20px;
}
p {
font-size: 20px;
}
button {
background-color:lightcyan;
border:0;
margin-right:10px;
padding: 7px;
border-radius: 10px;
cursor: pointer;
}
div{
width:500px;
height:150px;
padding:10px;
}
</style>
</head>
<body>
<div class="name">
<p>The background color and border properties of this element can be changed using the buttons given below.</p>
<button class="btn1">Change Background Color</button>
<button class="btn2">Add border</button>
</div>
<script>
const name = document.querySelector(".name");
const btn1 = document.querySelector(".btn1");
const btn2 = document.querySelector(".btn2");
btn1.addEventListener("click", changeColor);
function changeColor() {
name.style.backgroundColor = "lavender";
}
btn2.addEventListener("click", addBorder);
function addBorder() {
name.style.border = "2px solid indigo";
}
</script>
</body>
</html>
示例
在下面的示例中，我们使用“click”事件监听器和相应的 JavaScript 函数，在点击提交按钮时显示一个警告框。
<!DOCTYPE html>
<html>
<head>
<title>How to add onclick in a Button using JavaScript?</title>
<style>
div{
background-color:thistle;
width:200px;
height:150px;
padding:10px 15px 15px 20px;
margin:100px;
}
button{
background-color:mintcream;
height:25px;
width:60px;
border:0;
}
input{
margin-top:8px;
}
</style>
</head>
<body>
<div>
<form name="form1" action="/action_page.php" method="get">
<label for="fname">First name:</label><br>
<input type="text" class="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" class="lname" name="lname"><br><br>
</form>
<button class="btn">Submit</button>
</div>
<script>
const btn = document.querySelector(".btn");
btn.addEventListener("click", acknowledgement);
function acknowledgement() {
var fn = document.forms["form1"]["fname"].value;
var ln = document.forms["form1"]["lname"].value;
if (fn == "") {
alert("First Name required");
return false;
}
else if (ln == "") {
alert("Last Name required");
return false;
}
else
alert("The form has been submitted successfully!");
}
</script>
</body>
</html>
更新于：2023年9月11日
9K+ 次浏览
广告