我正在努力完成這項任務：將事件偵聽器固定到按鈕上。創建一個在單擊其中一個按鈕時呼叫的函式。用 console.log 檢查一下。確保點擊事件傳遞給這個函式。 確保您可以訪問在此函式中單擊的按鈕的值。用 console.log 檢查一下。單擊時您希望在控制臺中看到的結果是：Leopard / Lion / Elephant / Rhino 或 Buffalo。
fiveButtons = document.getElementsByClassName("big-five-button");
for (var i = 0; i < fiveButtons.length; i ) {
fiveButtons[i].addEventListener("click", function () {
Array.from(fiveButtons).forEach(function (nameButton) {
console.log(nameButton.innerHTML);
})
});
}
這是我到目前為止所寫的。當我現在單擊按鈕時，結果是來自所有按鈕的文本。雖然我希望在單擊按鈕 Lion 后結果僅為“Lion”。
<h1>The Big Five</h1>
<ul class="big-five-list">
<li class="big-five-list-item">
<button class="big-five-button">Lion</button>
</li> etc.
uj5u.com熱心網友回復：
您可以更改按鈕以包含如下所示的 onclick 功能：
https://www.w3schools.com/jsref/event_onclick.asp
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction('Lion')">Lion</button>
<input type="text" value="" id="getValue">
<p id="demo"></p>
<script>
function myFunction(value) {
document.getElementById("getValue").value = value;
}
</script>
</body>
</html>然后 onclick 函式將在 () 中有一個函式名稱的值。這會將您想要的值傳遞給函式，并且可以隨心所欲地呼叫它。上面的代碼片段顯示了如何使用它的示例
uj5u.com熱心網友回復：
試試這個解決方案！
fiveButtons = document.getElementsByClassName("big-five-button");
for (var i = 0; i < fiveButtons.length; i ) {
fiveButtons[i].addEventListener("click", function (item) {
console.log(item.target.innerHTML);
});
}
uj5u.com熱心網友回復：
創建 addEventListener 時，您可以使用事件物件來定位單擊的元素，如下所示：
fiveButtons[i].addEventListener("click", function (event) {
console.log(event.target.innerHTML);
});
uj5u.com熱心網友回復：
您傳遞給的函式addEventListener給出了一個事件引數：
fiveButtons = document.getElementsByClassName("big-five-button");
for (var i = 0; i < fiveButtons.length; i ) {
fiveButtons[i].addEventListener("click", function (event) { // use the first argument
console.log('element value:', event.target.value); // log the 'value' of the event target;
// I suspect you want the innerHTML or innerText
console.log('element innerText:', event.target.innerText);
});
}
然后就可以從 event.target 中的 DOM 節點獲取所需的資訊
uj5u.com熱心網友回復：
您不需要 for 回圈內的 Array.from。你可以這樣做：
fiveButtons = document.getElementsByClassName("big-five-button");
for (let i = 0; i < fiveButtons.length; i ) {
fiveButtons[i].addEventListener("click", function () {
console.log(fiveButtons[i].innerText);
});
}
uj5u.com熱心網友回復：
已編輯
// Get all the buttons
const fiveButtons = document.getElementsByClassName("big-five-button");
// Iterate through the collection of buttons
// Here is let i = 0 instead of var i = 0, since var has functional scope and let has block scope
// If we used var i = 0 it would not work implicitly because i would exist in the scope of a function,
// and all the event handlers (for each button) would share the same value of i
for (let i = 0; i < fiveButtons.length; i ) {
// For each button register event handler
fiveButtons[i].addEventListener("click", _ => {
// When button is clicked this part of a code is being called
// Because of javascript CLOSURE, it remembers the i value
console.log(fiveButtons[i].innerHTML)
});
}
如果這無法理解，請閱讀 JavaScript 中的閉包。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/341507.html
標籤：javascript html dom 添加事件监听器