var AddressesList = document.getElementsByTagName("li");
for (var i = 0; i < AddressesList.length; i++){
var allow = true;
AddressesList[i].addEventListener("click", function() {
if (allow == true) {
AddressesList[i].style.backgroundColor = 'red';
allow = false;
}
})
}
I keep getting the error:
Uncaught TypeError: Cannot read properties of undefined (reading 'style')
I have some idea that referencing an array element inside the event listener returns undefined? Because when I try just printing the array element, I get undefined, but it works outside the event listener. What's the issue and how do I fix it
Its working this way
var AddressesList = document.getElementsByTagName("li");
for (let i = 0; i < AddressesList.length; i++) {
const element = AddressesList[i];
var allow = true;
element.addEventListener("click", function () {
if (allow) {
element.style.backgroundColor = "red";
allow = false;
}
});
}<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="app">
<ul>
<li>Inder</li>
<li>Jane Doe</li>
<li>John Doe</li>
</ul>
</div>
<script src="src/index.js"></script>
</body>
</html>