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


My HTML:

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


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

my JS:

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

              if(event.target.value == 'all-time'){
                document.getElementById("overall_chart").classList.remove('hideElement')
                document.getElementById("thirty_days_top_chart").classList.add('hideElement')
              }
             
            }))

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