5

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.

2 respuestas 2

2

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.

1
  • Muchas gracias. Había pensado en un contador pero no estaba muy seguro de cómo hacerlo. En efecto, la idea es que cambie de color por cada clic. Te agradezco no sólo el código sino la explicación de la sintaxis. ¡Saludos! Commented el 6 dic. 2018 a las 23:55
2

El boton registra los dos funciones. Cuando se toca el boton, esto es lo que pasa:

Primeramente, el función que se llama 'myf1' esta activada, y el color del boton cambia a rojo.

Segundamente, el funcion que se llama 'myf2' esta activada, y el color del boton cambia a azul.

Los eventos pasan tan rápidamente que el HTML no tiene tiempo para realizar el color de rojo.

Si se quiere ver el cambio fácilmente, cambialo como asi:

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

Con este funcion, el Javascript va a esperar hasta 1000 milisegundos.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.