javascript – Why is my event listener not working on an element that is initially hidden?


 <div class="padding-me">
    <div id='thirty_days_top_chart' ></div>
    <div id='overall_chart' class = "hideElement"></div>

 <div class="padding-me">
   <div id="monthly_chart"></div>

my JS:

        var selection
        const selectElements = document.querySelectorAll(".drop-down-selection")
        selectElements.forEach(el => el.addEventListener('change', (event) => {
              console.log(`You like ${}`)
              selection =

              if( == 'all-time'){

I am trying to add an event listener to a series of graphs that have a drop drown menu. When the user changes their selection, new graphs should be displayed. These graphs all have a drop down menu with an event listener, and this event listener works fine if I do not hide the graphs initially. If I hide a graph and then render it later, the event listener will not be added to it.

I am not understanding why the event listener is not added to the graph that is initially hidden.

Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here