Así que he estado trabajando en un menú desplegable para seleccionar un idioma. Ese es el código:

HTML

 <div class="language_section"> <span id="select-lang-btn"><img class="language_flag" src="en.svg"><a id="selected-lang">English</a></span> <ul class="language_dropdown" id="language_dropdown"> <li onclick="show('English')"><a href="#" class="language_text"><img class="language_flag" src="en.svg">English</a></li> <li onclick="show('Germany')"><a href="#" class="language_text"><img class="language_flag" src="de.svg">German</a></li> <li onclick="show('Spanish')"><a href="#" class="language_text"><img class="language_flag" src="es.svg">Spanish</a></li> </ul> </div>

CSS

 <style> body { background-color: #339699; } #select-lang-btn { outline: none; cursor: pointer; } .language_dropdown { display: none; align-items: center; background-color: white; width: 300px; } li { cursor: pointer; list-style: none; } .language_text { color: black; text-decoration: none; } .language_flag { width: 32px; } </style>

JS

 <script> var button = document.getElementById('select-lang-btn'); button.onclick = function() { var div = document.getElementById('language_dropdown'); if (div.style.display === 'block') { div.style.display = 'none'; } else { div.style.display = 'block'; } }; function show(anything) { document.getElementById("selected-lang").innerHTML = anything document.getElementById('language_dropdown').style.display = 'none'; } </script>

Sin embargo, hay un problema con mi código. Cuando selecciono un nuevo idioma, el idioma seleccionado aparece como un texto, pero la imagen no cambia. Eso es porque creé una función llamada mostrar que solo logra cambiar el texto. Ahora he estado investigando y pensando mucho, pero todavía no encontré una solución. Entonces tuve una idea si podía cambiar la imagen por el texto interno -> Por ejemplo, si Alemania está visible, la imagen cambia automáticamente a la bandera de Alemania. Pero parece que no hay nada sobre ese método en línea. ¿Es eso posible o hay una forma más limpia de resolver este problema?