es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

HTML el botón onclick requiere dos clics.

24 Jul, 2023 Programación

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 mostrará/ocultará algún 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 en el botón dos veces para que el color de fondo cambie.

¿Alguien sabe cómo arreglar esto para que funcione después de solo un clic?

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Hay algunas posibles razones por las que necesitas hacer clic en el botón dos veces para que el color de fondo cambie. Una posibilidad podría ser que el color de fondo inicial ya sea el color objetivo, lo que hace que parezca que no sucede nada en el primer clic. Otra posibilidad podría ser que el código de JavaScript no se esté ejecutando correctamente.

    Para solucionar este problema, puedes intentar agregar declaraciones console.log al código de JavaScript para ver si se está llamando y para verificar los valores de las variables. Por ejemplo:

    function show_team(equipo, boton_equipo) {
    console.log('show_team llamado'); // verificar si la función se llama
    x = document.getElementById(equipo);
    console.log('x:', x); // verificar el valor de x
    btn = document.getElementById(boton_equipo);
    console.log('btn:', btn); // verificar el valor de btn
    if (x.style.display === "none") {
        x.style.display = "block";
        btn.style.backgroundColor = '#1DA1F2';
    } else {
        x.style.display = "none";
        btn.style.backgroundColor = '#161616';
    }
}

    También puedes intentar simplificar el código para ver si mejora el comportamiento. Por ejemplo, en lugar de verificar el estilo actual del elemento, puedes usar una variable para llevar un registro del estado:

    function show_team(equipo, boton_equipo) {
    x = document.getElementById(equipo);
    btn = document.getElementById(boton_equipo);
    if (x.hidden) {
        x.hidden = false;
        btn.style.backgroundColor = '#1DA1F2';
    } else {
        x.hidden = true;
        btn.style.backgroundColor = '#161616';
    }
}

    Esto utiliza la propiedad “hidden” en lugar de la propiedad “display” y una variable booleana para verificar el estado en lugar del estilo actual. ¡Espero que una de estas sugerencias te ayude a solucionar el problema!

Comments are closed.