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.