Estoy trabajando en un proyecto de selección de películas. Tengo cinco botones de radio, después de que un usuario haya hecho clic en un botón de radio, quiero mostrar las películas con ese valor. Estoy pensando que una declaración de cambio funciona mejor con este proyecto. Sin embargo, parece que no puedo hacerlo funcionar.
Este es uno de los botones de opción:
<input type="radio" id="avenger-movies" name="select-movie" value="avenger-movies"> <label for="avenger-movies">Avenger films</label>¿Cómo escribo la declaración para estos botones? Esta es mi función hasta ahora:
const getRadioButtons = document.getElementsByName("select-movie"); getRadioButtons.forEach((radiobtn) => { radiobtn.addEventListener('change', (event) => { function handleOnChangeEvent() { // console.log(event.target.value) const inputValue = event.target.value; switch (inputValue) { // Case.. } } handleOnChangeEvent() }) })<div id="allRadio"> <input type="radio" id="avenger-movies" name="select-movie" value="avenger-movies"> <label for="avenger-movies">Avenger films</label> <input type="radio" id="hello" name="select-movie" value="avenger-movies"> <label for="hello">hello world</label> </div> <script> document.getElementById("allRadio").addEventListener("click",(e)=>{ switch(e.target.getAttribute("id")){ case 'avenger-movies': alert(1); break; case 'hello': alert(2); break; } }) </script>Puede usar la delegación de eventos para manejarlo, espero que lo ayude.