資料結構
網路
關係資料庫管理系統 (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+ 次瀏覽
廣告