Estoy teniendo dificultades para tratar de averiguar qué está mal en mi código. Cuando llamo a la función clean() , limpia la pantalla sin mostrar nunca un <div> . Si llamo a la función togglevisible() , muestra el div en el que hice clic, aunque en un nuevo elemento, haga clic en no ocultar el primer elemento, mostrando el segundo elemento debajo del primer elemento. ¿Cómo puedo ocultar un elemento después de hacer clic en uno nuevo en Javascript? Este es el código que estoy usando atm:
function clean() { if (previous_value !== null) { var hide = document.getElementById(previous_value); hide.style.display = "none"; } togglevisible(); } function togglevisible() { var dropdown = document.getElementById("dropdownCenterBtn"); var current_value = dropdown.options[dropdown.selectedIndex].value; var previous_value = current_value; if (current_value !== null) { var selected = document.getElementById(current_value); selected.style.display = "flex"; } else { var selected = document.getElementById(current_value); selected.style.display = "none"; } } <div class="dropdown-center"> <select class="dropdown-menu" id="dropdownCenterBtn" onchange="clean()"> <option>Courses List</option> <option>------------</option> <option value="div1">Introduction to Computer Science</option> <option value="div2">Web Programming with Python and Javascript</option> </select> </div> <div class="div1" id="div1"> <h3>Introduction</h3> </div> <div class="div2" id="div2"> <h3>Web Programming</h3> </div>Fuiste demasiado lejos. Aquí hay una solución rápida para eso.
function clean(event) { var divs = document.querySelectorAll(".div"); divs.forEach(function (div){ if(div.id === event.target.value && div.style.display == "none") div.style.display = "flex"; else if(div.style.display !== "none") div.style.display = "none"; }); } <div class="dropdown-center"> <select class="dropdown-menu" id="dropdownCenterBtn" onchange="clean(event)"> <option>Courses List</option> <option>------------</option> <option value="div1">Introduction to Computer Science</option> <option value="div2">Web Programming with Python and Javascript</option> </select> </div> <div class="div1 div" id="div1"> <h3>Introduction</h3> </div> <div class="div2 div" id="div2"> <h3>Web Programming</h3> </div>