「迭代通過div時無法讀取屬性'classList'的未定義」錯誤 - Javascript

我想在頁面上切換5個圓圈（div類class'circle'），以便通過eventListener單擊更改背景顏色。「迭代通過div時無法讀取屬性'classList'的未定義」錯誤 - Javascript

的javascript：

var circle = document.querySelectorAll(".circle"); 

for(var i = 0; i < circle.length; i++){ 
circle[i].addEventListener('click', function(){ 
circle[i].classList.toggle('effect'); 
}); 

}

我不斷收到錯誤「無法讀取屬性‘班級列表’中未定義」 - 我不知道爲什麼圓是不確定的？

CSS：

.circle { 
width: 100px; 
height: 100px; 
border: solid 3px black; 
border-radius: 100%; 
float: left; 
margin: 1%; 
} 


.effect { 
background-color: green; 
border-color: blue; 

}

HTML：

<!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset="utf-8"> 
    <title></title> 
    <link rel="stylesheet" href="style.css"> 
</head> 
<body> 

    <div class="circle"> 
    </div> 

    <div class="circle"> 
    </div> 


    <div class="circle"> 
    </div> 

    <div class="circle"> 
    </div> 

    <div class="circle"> 
    </div> 


<script src="script.js"></script> 
</body> 
</html>

來源

2017-04-04 FakeEmpire

什麼是你的'circle.length'？粘貼html以及類'circle' – Curiousdev

您的html ......？ – repzero

傳遞到addEventListener回調捕獲varible i在循環，所以當它是時候要執行的回調（中click事件被觸發）回調只是看到循環結束時的變量i，這是您的circle.length，所以circle[i]將超出限制，返回一個不存在的元素（或undefined）。因此，要使其工作，改變circle[i]回this指向當前的DOM元素中，像這樣

for(var i = 0; i < circle.length; i++) { 
    circle[i].addEventListener('click', function(){ 
     this.classList.toggle('effect'); 
});

詳細瞭解此HERE

來源

2017-04-04 04:09:45 Dummy

目標this內addEventListener選擇。

var circle = document.querySelectorAll(".circle"); 
 
for(var i = 0; i < circle.length; i++){ 
 
    circle[i].addEventListener('click', function(){ 
 
     this.classList.toggle('effect'); 
 
    }); 
 
}

.circle { 
 
    width: 100px; 
 
    height: 100px; 
 
    border: solid 3px black; 
 
    border-radius: 100%; 
 
    float: left; 
 
    margin: 1%; 
 
} 
 

 

 
.effect { 
 
    background-color: green; 
 
    border-color: blue; 
 
}

<div class="circle"> 
 
</div> 
 

 
<div class="circle"> 
 
</div> 
 

 
<div class="circle"> 
 
</div> 
 

 
<div class="circle"> 
 
</div> 
 

 
<div class="circle"> 
 
</div>

來源

2017-04-04 04:26:15 Mamun

@RobG謝謝。更新了代碼。 – Mamun

由於click事件將在未來發生，但i爲與最後的值作爲循環不會等待執行的更新。

var circle = document.querySelectorAll(".circle"); 

for (var i = 0; i < circle.length; i++) { 
    // Creating a closure & passing value of i which is received in argument x 
    (function(x) { 
    // adding the click event to the the element 
    circle[x].addEventListener('click', function() { 
     // this will refer to the current element in target 
     this.classList.toggle('effect') 
    }) 

    }(i)) // passing the value of i 
}

DEMO

來源

2017-04-04 04:26:39 brk

「迭代通過div時無法讀取屬性'classList'的未定義」錯誤 - Javascript

回答

相關問題