addEventListener 中的 Function 不起作用

Question

const bubbles = document.querySelectorAll('.bubble')

function filledBubble (event){
    event.classList.toggle("filled");
}

bubbles.forEach((bubble) => {
    bubble.addEventListener('click', filledBubble);
})

大家好，

我試圖將一個事件應用於我的氣泡。 所以當我們點擊時，它會改變顏色。 但不知何故，我不知道為什么我的 function 不起作用。 此外，在控制台上，它也沒有顯示語法錯誤。

您在我的代碼中看到任何錯誤嗎？

HTML 代碼

<h3>Select</h3>
    <div class="container">
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
    </div>

Answer 1

使用event.target event.target.classList.toggle("filled")
或者這個this.classList.toggle("filled")

演示：

 const bubbles = document.querySelectorAll('.bubble') function filledBubble (event){ this.classList.toggle("filled"); } bubbles.forEach((bubble) => { bubble.addEventListener('click', filledBubble); })

 .bubble { margin: .5em; cursor: pointer; }.filled { background-color: green; }

 <h3>Select</h3> <div class="container"> <div class="bubble"> bubble 1</div> <div class="bubble"> bubble 2</div> <div class="bubble"> bubble 3</div> </div>

Answer 2

正如其他人所提到的， event.target.classList.toggle("filled")是答案，但既然你說它不是那么你有 javascript 初始化發生在 HTML 已經呈現之前。 換句話說，將 javascript 放在 HTML 之后。

或者，在頁面加載后運行 javascript 初始化：

<head>
<script>

let bubbles

function initJS() {
  bubbles = document.querySelectorAll('.bubble');
  bubbles.forEach((bubble) => {
    bubble.addEventListener('click', filledBubble);
  });
}

function filledBubble (event){
  this.classList.toggle("filled");
}

</script>
</head>
<body onload='initJS()'>
...
<h3>Select</h3>
<div class="container">
    <div class="bubble"> bubble 1</div>
    <div class="bubble"> bubble 2</div>
    <div class="bubble"> bubble 3</div>
 
</div>

addEventListener 中的 Function 不起作用

問題描述

2 個解決方案

解決方案1
0 2021-04-24 20:20:51

解決方案2
0 已采納 2021-04-24 20:28:09

addEventListener 中的 Function 不起作用

問題描述

2 個解決方案

解決方案1 0 2021-04-24 20:20:51

解決方案2 0 已采納 2021-04-24 20:28:09

解決方案1
0 2021-04-24 20:20:51

解決方案2
0 已采納 2021-04-24 20:28:09