@turtlecrab
Posted
Hey great job, it looks really close to the design!
Addressing your question - there are several inaccuracies in your code:
- your query selector parameter string looks like you are up to grab labels for radio inputs(correct query for this case would be
querySelectorAll('.percent-input + label')), but you actually don't need labels, you need to uncheck the inputs themself! So query request here should be simplyquerySelectorAll('.percent-input') querySelectorAllreturns a list of nodes, so you can't just use methods like.classList.removeon it, you need to iterate over the list and do all the stuff in that loopcheckedis not a class, it's a property of an input, so to remove it we just set it tofalse
So the working solution I've come up with is:
customTip.addEventListener("click", function () {
const radioInputs = document.querySelectorAll(".percent-input")
radioInputs.forEach(input => input.checked = false)
});
I hope that helped!
Marked as helpful
@allyson-s-code
Posted
@turtlecrab Thanks so much!!! This was so helpful. At one point I tried querySelectorAll('.percent-input') but I did not understand that it returned a list of nodes and the need for the loop. And that checked acts as a property of input.
Thanks so much for taking the time to provide feedback. I really appreciate it!!!
Allyson
@turtlecrab
Posted
@allyson-s-code It's also worth mentioning that querySelectorAll returns not an array but a special NodeList object. Which conveniently has forEach method just like an array, but it doesn't have methods like map, reduce or filter so if we want to use these we need to convert it to an array via Array.from(nodeList) or spread [...nodeList]
I'm really glad my comment did help! I actually just recently learned these dom and query related details, before that I was as confused as you were, so I'm happy to share the knowledge! Also they say the best way to learn something is to teach it :)
Marked as helpful
@allyson-s-code
Posted
@turtlecrab thanks so much! I'll try to spread the knowledge as well! :)
