¿Cómo cambiar el color de un botón al hacer clic con JavaScript desde Jupyter?

publicado por: Anonymous

Estoy tomando un curso sobre visualización de datos en Python y en estos momentos vemos algunas cosas básicas sobre HTML y Javascript.

El siguiente código hace un sencillo cuadro en HTML usando el comando %%hmtl desde una notebook de Jupyter.

## Esto se ejecuta en una celda

%%html

<style>
    #boton
    {
        width: 60px;
        height: 50px;
        background-color: grey;
        color: white;
        text-align: center;
    }
</style>
<div id="boton"></div>

Ahora bien, para crear eventos sobre el cuadro, utilizamos %%javascript. A fin de que la función registre el doble clic y cambie el color del cuadro, seguí el modelo que viene en este tutorial:

https://www.w3schools.com/js/js_htmldom_eventlistener.asp

El código quedaría así:

##Esto se ejecuta en otra celda
    %%javascript

    let boton = document.getElementById("boton");
    boton.addEventListener("click", myf1);
    boton.addEventListener("click", myf2);
    boton.addEventListener("mouseover", function(){boton.textContent="¡Hola!"});
    boton.addEventListener("mouseout", function(){boton.textContent="No te vayas"});


    function myf1() {
      document.getElementById("boton").style.backgroundColor= "red";
    }

    function myf2() {
      document.getElementById("boton").style.backgroundColor = "blue";
    }

Ahora bien, cuando regreso al botón, el color cambia inmediatamente a azul, es decir, no registra los eventos “rojo” y luego “azul” al hacer clic. Considerando que soy un principiante, agradezco cualquier orientación y también su comprensión y paciencia.

solución

No está muy claro qué pretendías al asignar al evento clic dos funciones.
Si lo que querías era que al pulsar la primera vez cambiara a rojo y la segunda vez cambiara a azul, la forma de lograrlo ha de ser gestionar eso desde una sola sola función, que lleve la cuenta de cuántas veces se pulsó. Por ejemplo:

%%javascript
(function() {
    let boton = document.getElementById("boton");
    boton.addEventListener("click", myf1);
    boton.addEventListener("mouseover", function(){boton.textContent="¡Hola!"});
    boton.addEventListener("mouseout", function(){boton.textContent="No te vayas"});

    let contador = 0;

    function myf1() {
      if (contador % 2 ==0) {
          boton.style.backgroundColor= "red";
      } else {
          boton.style.backgroundColor = "blue";
      }
      contador += 1;
    }
})();

La extraña sintaxis de meter todo el código dentro de las llaves de (function(){...})() es un truco típicamente usado en JavaScript para evitar que boton o contador sean variables globales que “ensucien” el espacio de nombres global. Todo se define dentro de una función sin nombre, que inmediatamente después de ser definida se ejecuta. Conceptualmente es equivalente a escribirlo todo fuera, pero se evita así tener variables globales.

Respondido por: Anonymous

Leave a Reply

Your email address will not be published.