极客笔记如何使用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>