I want to use oneEventListener for all the element which has same class in the page . But It is just work for first one element.How can I achieve?

This is the code here just perform for first element which has .heading class.How can I achieve this? Please help me.

here is the code pen link to view this directly

<!DOCTYPE html>
    <title>New work</title>
    <h1 id='heading'class='heading heading2'>First Heading</h1>
    <h2 id='heading' class='heading heading2'>Sub Heading</h2>
    <h3 id='heading' class='heading heading3'>Third Heading</h3>

      background-color: yellow;
      width: 50%;
      margin:0 auto;
      padding: 10px;
      border: 1px solid red;
      cursor: pointer;

      margin-top: 10px;

    const heading = document.querySelector('.heading');

Hi @rkprite09 :wave:

I see in your updated pen that you found out about querySelectorAll(). You now just need to change heading.style.backgroundColor='teal'; into item.style.backgroundColor='teal'; to change the style of each looped element.

Happy coding!

1 Like