資料結構
網路
關係資料庫管理系統(RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何在HTML中新增和移除onclick事件的值？
在HTML元素的點選事件中新增和移除值是與網頁互動的一種實用方法。可以使用JavaScript來實現這一點，它允許在使用者點選特定元素時新增或移除某些值。這使開發人員能夠建立互動式、使用者友好的網站，使用者可以輕鬆地操作。
讓我們深入瞭解這篇文章，更好地理解如何在HTML中新增和移除onclick事件的值。
在HTML中向onclick事件新增值
在深入瞭解文章之前，讓我們快速瞭解一下addEventListener()方法和remove()方法，這兩個方法通常用於移除值。
addEventListener() 方法
JavaScript有一個內建函式叫做addEventListener()，它接受兩個引數：要監聽的事件和第二個引數，該引數將在事件發生時被呼叫。向單個元素新增任意數量的事件處理程式不會替換任何已存在的事件處理程式。
語法
以下是addEventListener()的語法：
addEventListener(type, listener)
示例
在下面的示例中，我們執行指令碼在點選事件中新增和移除值。
<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="addingvalue()">Click To Add</button><br>
<script>
function addingvalue() {
let tutorial = document.createElement('tutorial');
tutorial.textContent = `The Present Date And Time Was, ${new Date()}`;
tutorial.addEventListener('click', removingvalue);
document.body.appendChild(tutorial);
}
function removingvalue(a) {
a.target.remove();
}
</script>
</body>
</html>
當指令碼執行時，它將生成一個包含網頁上點選按鈕的輸出。如果使用者點選按鈕，它會添加當前日期和時間，而當用戶點選文字時，文字將被刪除。
從HTML的onclick事件中移除值
remove() 方法
使用remove()函式可以從文件中刪除元素（或節點）。
語法
以下是remove()的語法：
element.remove()
要了解更多關於在HTML中新增和移除onclick事件值的資訊，讓我們看看下面的例子。
示例
考慮下面的例子，我們執行指令碼在onclick事件中新增和移除值。
<!DOCTYPE html>
<html>
<body>
<h2>TutorialsPoint</h2>
<div id="tutorial">
<p id="tutorial1">Contains Lot Of Courses</p>
</div>
<button onclick="removevalue()">Click To Remove</button>
<script>
const paragraph = document.createElement("p");
const node = document.createTextNode("The Best E-Learning (added newly)");
paragraph.appendChild(node);
const element = document.getElementById("tutorial");
const child = document.getElementById("tutorial1");
element.insertBefore(paragraph,child);
function removevalue() {
document.getElementById("tutorial1").remove();
}
</script>
</body>
</html>
執行上面的指令碼後，將彈出輸出視窗，顯示文字以及網頁上新新增的值和點選按鈕。當用戶點選按鈕時，與段落ID關聯的文字將被移除。
更新於：2023年4月20日
3K+ 瀏覽量
廣告