Toggle not working on JS

JavaScript
1

On click of the list Item, I was expecting the toggle to work.

const eleList =  document.querySelectorAll(".listitem");
for(let x=0; x<eleList.length;x++){
  console.log(eleList[x]);
  eleList[x].style.backgroundColor="yellow";
  eleList[x].style.pading="25px";
  eleList[x].addEventlistener("click",makeItRed);
}
function makeItRed(){
  console.log(this);
  let temp = this.classList.toggle("red");
  console.log(temp);
}

But the class is not implementing as I was expecting.

HTML is →

<ul>
  <li class="listitem">One</li>
  <li class="listitem">Two</li>
  <li class="listitem">Three</li>
  <li class="listitem">Four</li>
</ul>
2

Hi @codeispoetry, if you open the console of the browser dev tools you can see an

Uncaught TypeError: eleList[x].addEventlistener is not a function

… caused by a typo in addEventListener (watch the case).

2 Likes
3

Got it sir. It is working now.

1 Like
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.