mi estructura básica de la función JS funciona. Sin embargo, solo afecta al primer DIV de la estructura HTML que se va a mostrar y ocultar.
La clase CSS "map-content" no tiene none como propiedad de visualización. Varios contenedores recibirán esta clase y, por lo tanto, inicialmente estarán ocultos. Todos los contenedores DIV obtienen su propio valor, que es necesario en mi código al cambiar la propiedad de visualización.
Esta es mi función, que básicamente funciona, pero solo muestra y oculta el primer contenedor (en la estructura HTML) con la clase "map-content".
function validate_3() { var x = document.getElementById("location_select"); var y = x.options[x.selectedIndex].value; var a = document.querySelector(".map-content"); var b = a.getAttribute('value'); { if (y == b) { a.style.display = "block"; } else { a.style.display = "none"; } } } .map-content { display: none; } <select id="location_select" onchange="validate_3"> <option disabled selected>Select location...</option> <option value="de_germany">Berlin: Germany</option> <option value="fr_france">Paris: France</option> <option value="it_italy">Rome: Italy</option> </select> <div class="map-content" value="de_germany"> <h3>This is Berlin</h3> <p>Berlin is in Germany</p> </div> <div class="map-content" value="fr_france"> <h3>This is Paris</h3> <p>Paris is in France</p> </div> <div class="map-content" value="it_italy"> <h3>This is Rome</h3> <p>Rome is in Italy</p> </div>Nota sobre el fragmento de código: no sé por qué, pero a diferencia de mi interfaz de prueba, ninguna de las selecciones funciona aquí. Ni siquiera el primero en la estructura como se describe en el texto.
Estoy feliz de recibir sugerencias generales para una mejor estructura si las hay.
le falta un conjunto de paréntesis aquí onchange="validate_3"> , agregue un conjunto de paréntesis como este onchange="validate_3()"> , y su primera selección debería funcionar
Para obtener lo que desea, asegúrese de haber agregado los paréntesis como se muestra arriba.
javascript,
// take this line out of your funtion and change `querySelector` to //`querySelectorAll` var a = document.querySelectorAll(".map-content"); function validate_3() { var x = document.getElementById("location_select"); var y = x.options[x.selectedIndex].value; //use The forEach() method to executes a provided function once for each //element. a.forEach((element) => { if (y != element.getAttribute("value")) { (element.classList.add("map-content")) } else { element.classList.remove("map-content") }; }); };Pero en realidad, es mejor que no uses onclick en absoluto y adjuntes el controlador de eventos al nodo DOM a través de tu código Javascript. Esto se conoce como javascript discreto .