Vi las respuestas de preguntas similares pero no me ayudaron
Tengo un botón que, al hacer clic, cambiará el color de fondo del botón y ocultará/mostrará parte del contenido
HTML
<button class="pro-saved-team-btn" id="{{ teams[loop.index0] | replace(' ', '') + 'button' }}" onclick="show_team('{{ team | replace(' ', '') }}', '{{ team | replace(' ', '') + 'button' }}')"> {{ team.title() }} </button>JS en HTML
<script> function show_team(team, team_btn) { x = document.getElementById(team); btn = document.getElementById(team_btn); if (x.style.display === "none") { x.style.display = "block"; btn.style.backgroundColor = '#1DA1F2'; } else { x.style.display = "none"; btn.style.backgroundColor = '#161616'; } } </script>Sé que la función funciona, pero necesito hacer clic dos veces en el botón para que cambie el color de fondo.
¿Alguien sabe cómo arreglar esto para que funcione después de un solo clic?
El problema es que cuando las cosas se inician, nadie ha establecido el estilo de visualización de propiedades.
Por lo tanto, la primera vez que la prueba x.style.display === "none" falla.
Entonces, el código establece x.style.display en 'ninguno'.
Entonces, la próxima vez, la prueba funciona.
Para evitar tener que configurar cada visualización de estilo en ninguno en el cambio de inicio
x.style.display === "none"a:
x.style.display != "block"El problema no se reproduce con el fragmento de código que ha proporcionado:
<html> <html> <head> </head> <body> <div id="teamId"> hee hee hee </div> <button id="buttonId" onclick="show_team('teamId','buttonId')"> click </button> <script> function show_team(team, team_btn) { x = document.getElementById(team); btn = document.getElementById(team_btn); if (x.style.display === "none") { x.style.display = "block"; btn.style.backgroundColor = '#1DA1F2'; } else { x.style.display = "none"; btn.style.backgroundColor = '#161616'; } } </script> </body> </html>Puedes hacer lo siguiente:
console.log('clicked') ) a su función para asegurarse de que cada clic que haga sea recibido por el botón, e investigue la fuente de las intercepciones si algunos clics nunca llegaron al botónpro-saved-team-btn onclick botón y verifique si cambia el comportamiento del botón al hacer clic