Estoy comenzando JS, por lo que esta puede ser una pregunta estúpida. Quiero hacer un menú desplegable, donde si elige una opción, el párrafo relacionado sería visible. Realmente no sabía cómo iniciar esto, así que creé la función de autos para hacer visible el párrafo "e38value" al hacer clic en el botón e38, pero no sucede nada cuando hago clic en él y no tengo idea de por qué. Si alguien sabe una mejor manera de hacer esto y no es tan complicado y un principiante podría entenderlo, estaría muy feliz si pudiera compartirlo conmigo.
var e38 = document.querySelectorAll('e38value') function cars() { document.querySelectorAll('e38').onclick = function() { console.log('clicked'); e38.classList.toggle("e38hidden"); } } .e38hidden { display: none; } <nav> <menu> <menuitem id="kocsid"> <a>Amilyen kocsid van</a> <menu> <menuitem id="Audi"> <a>Audi</a> <menu> <menuitem><a>Audi</a></menuitem> <menuitem><a>Audi</a></menuitem> <menuitem><a>Audi</a></menuitem> <menuitem><a>Audi</a></menuitem> </menu> </menuitem> <menuitem id="BMW"> <a>BMW</a> <menu> <menuitem><a class="e38">750 e38</a></menuitem> <menuitem><a>760 e65</a></menuitem> <menuitem><a>M3 e46</a></menuitem> <menuitem><a>M3 e62</a></menuitem> </menu> </menuitem> <menuitem id="Dodge"> <a>Dodge</a> <menu> <menuitem onclick=""><a>Dodge</a></menuitem> <menuitem><a>Dodge</a></menuitem> <menuitem><a>Dodge</a></menuitem> <menuitem><a>Dodge</a></menuitem> </menu> </menuitem> </nav> <p id="e38value" class="e38hidden">e38 value</p>Probablemente haya otras formas mejores de lograrlo, pero aquí está cómo arreglar su secuencia de comandos:
function cars() { document.querySelectorAll('.e38').forEach(function(e) { e.onclick = function(evt) { console.log('clicked', evt.target.innerHTML); document.getElementById("e38value").classList.toggle("e38hidden"); } }) } cars();Nota:
cars() para inicializar realmente los eventos.e38forEach ya que querySelector devuelve una matriz de elementos (en ese caso, con solo un elemento)Aquí hay un violín: https://jsfiddle.net/b9728Lmk/1/
¿Eso resuelve el problema?
Simplemente puede onchange un evento de cambio que eliminará la visibilidad del elemento seleccionado previamente y hará que el elemento seleccionado actualmente sea visible.
function selectSection(value) { let context = document.getElementById("sections"); for (let visible of context.querySelectorAll("p.visible")) { visible.classList.remove("visible"); } if (context.children[value]) context.children[value].classList.add("visible"); } #sections > p:not(.visible) { display: none; } <select id="section-selector" onchange="selectSection(this.value)"> <option value="">Please Select</option> <option value="0">First</option> <option value="1">Second</option> <option value="2">Third</option> <option value="3">Fourth</option> <option value="4">Fifth</option> </select> <div id="sections"> <p>section 1</p> <p>section 2</p> <p>section 3</p> <p>section 4</p> <p>section 5</p> </div>Aquí hay una versión actualizada jsFiddle
var menuItemToClick = document.querySelectorAll('.e38') function cars(){ // I use for here because the menuItemToClick is an array that containt all element having class name e38 for (var i = 0; i < menuItemToClick.length; i++) { menuItemToClick[i].addEventListener('click', function(event) { console.log('clicked'); ParagraphToHide = document.querySelectorAll('#e38value'); //I use [0] because the ParagraphToHide is an array, as we use an id we are pretty sure that we will select the first element ParagraphToHide[0].classList.toggle("e38hidden"); }); } } cars();