0

Just to be clear, the .drop-down-selection is rendered into my html via my javascript. So the class is there from the beginning.

My HTML:

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


     <div class="padding-me">
        <div id="total_chart"></div>
        <div id="total_30_days_chart"></div>
    </div>

my JS:

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

    console.log(`You like ${event.target.value}`);
    selection = event.target.value;

    if (event.target.value == "all-time") {
      document.getElementById("overall_chart").style.display = "block"
      document.getElementById("total_chart").style.display = "block"

      document.getElementById("thirty_days_top_chart").style.display = "none"
      document.getElementById("total_30_days_chart").style.display = "none"
      
    }
    if (event.target.value == "past-thirty-days") {
        document.getElementById("thirty_days_top_chart").style.display = "block"
        document.getElementById("total_30_days_chart").style.display = "block"
        
        document.getElementById("overall_chart").style.display = "none"
        document.getElementById("total_chart").style.display = "none"
      }
  })
);

my css:

#overall_chart{
  display: none;
}

#total_chart{
  display: none;
}

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.

If you go into the graph and select the option for total number of refreshes, a new graph will be rendered. This new graph does not have the event listener tied to it.

Rogelio Cordova
  • 31
  • 5
  • 1
    You may want to turn this into a [mcve] because as described, and even with the code you're showing, this should work just fine. Barring the fact that your code seems only unhide a single element, based on `id` (there can only be one of those. `id` attributes uniquely identify _one_ element, even if you have more elements with the same id) – Mike 'Pomax' Kamermans Jul 29 '21 at 21:15
  • I have added a codepen. Yeah right now it only unhides a single element, I'm just using console.log to see if the event listener is being added to the graph, but it isnt. The ID for each graph will be unique, right now there is only a single element being unhidden because I am just trying to test out my event listener – Rogelio Cordova Jul 29 '21 at 21:28
  • 1
    There are no elements with the class `drop-down-selection` in your html – Jon P Jul 29 '21 at 23:52
  • they are rendered into the html via my javascript, you can verify this by hitting inspect. They are rendered into the title through the zinggrid api – Rogelio Cordova Jul 30 '21 at 00:11
  • Please include all relevant information in the question itself. You will need to assign the event listener **after** the elements are rendered or use even delegation. Please include all relevant info in the question itself preferably as a [mcve] – Jon P Jul 30 '21 at 12:55

0 Answers0