How do I change the contents of an unordered list using Data attributes and JS objects?

Question

I have dynamic list items that need to change based on the input of a range slider. I am using an in my HTML and the

have data attributes. I created JS objects that I would like to use to populate the list depending on where the slider is.

Here is my HTML:

 <p>Equivelant impact to:</p> <ul id="impact-list"> <li data-miles></li> <li data-coal></li> <li data-waste></li> </ul>

here are my objects:

 const sbImpactTen = { miles: "3,418 less miles driven", coal: "1,524 less pounds of coal burned", waste: "60 trash bags of waste recycled" } const sbImpactFifty = { miles: "17,000 less miles driven", coal: "8,000 less pounds of coal burned", waste: "300 trash bags of waste recycled" } const sbImpactHundred = { miles: "34,000 less miles driven", coal: "15,000 less pounds of coal burned", waste: "3,596 trash bags of waste recycled" }

and here is the function:

 var sbSlider = document.getElementById("location-range-slider"); var output = document.getElementById("value"); var cost = document.getElementById("monthly-cost"); var impact = document.getElementById("impact-list"); output.innerHTML = "10"; sbSlider.oninput = function() { if (sbSlider.value === "1") { output.innerHTML = "10", cost.innerHTML = "$5", impact.innerHTML = sbImpactTen; } else if (sbSlider.value === "2") { output.innerHTML = "50", cost.innerHTML = "$20", impact.innerHTML = sbImpactFifty; } else { output.innerHTML = "100", cost.innerHTML = "$40", impact.innerHTML = sbImpactHundred; } }

I am also including my codepen for viewing

Answer 1

Not sure about those other values, but for the HTML you show, just use querySelector and the data-attributes to target the elements

 let impact = document.querySelector("#impact-list") let slider = document.querySelector('.sbSlider'); const sbImpactTen = { miles: "3,418 less miles driven", coal: "1,524 less pounds of coal burned", waste: "60 trash bags of waste recycled" } const sbImpactFifty = { miles: "17,000 less miles driven", coal: "8,000 less pounds of coal burned", waste: "300 trash bags of waste recycled" } const sbImpactHundred = { miles: "34,000 less miles driven", coal: "15,000 less pounds of coal burned", waste: "3,596 trash bags of waste recycled" } // listen to the changes slider.addEventListener('input', e => adjustData(e.target)) const adjustData = el => { let useImpact if (el.value === "1") { useImpact = sbImpactTen; } else if (el.value === "2") { useImpact = sbImpactFifty; } else { useImpact = sbImpactHundred; } for (let i in useImpact) { impact.querySelector(`li[data-${i}]`).innerHTML = useImpact[i] } } // kick it off with the default value adjustData(slider)

 <input type="range" min="1" max="3" value="1" class="sbSlider" id="myRange"> <hr> <p>Equivelant impact to:</p> <ul id="impact-list"> <li data-miles></li> <li data-coal></li> <li data-waste></li> </ul>