Home / Questions / 220237
Accepted
Alejandro Carrera
Asked: 2020-12-07 15:10:02 +0800 CST 2020-12-07 15:10:02 +0800 CST

如何使用 Jupyter 中的 JavaScript 更改单击按钮的颜色？

  • 772

我正在学习 Python 中的数据可视化课程，现在我们正在学习一些关于 HTML 和 Javascript 的基本知识。

以下代码使用%%hmtlJupyter 笔记本中的命令创建了一个简单的 HTML 框。

## 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>

现在，要在盒子上创建事件，我们使用%%javascript. 为了使函数注册双击并更改框的颜色，我遵循了本教程中的模型：

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

代码如下所示：

##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";
    }

现在，当我返回按钮时，颜色立即变为蓝色，即它不会在单击时记录“红色”和“蓝色”事件。考虑到我是初学者，我感谢任何指导以及您的理解和耐心。

javascript

2 Answers

  1. 该按钮注册了这两个功能。当按钮被触摸时，会发生以下情况：

    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.

    事件发生得如此之快，以至于 HTML 没有时间将其涂成红色。

    如果您想轻松查看更改，请按以下方式更改：

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

    使用此函数，Javascript 将等待最多 1000 毫秒。

    • 2
  2. Best Answer

    为单击事件分配两个函数的含义还不是很清楚。如果你想要的是当你第一次按下它时它会变成红色，第二次它会变成蓝色，那么实现它的方法必须是从一个函数中管理它，它会跟踪它的次数按下。例如：

    %%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;
    }
})();

    将所有代码放在花括号内的奇怪语法 (function(){...})()是 JavaScript 中通常使用的一种技巧，以防止botonocontador作为全局变量“污染”全局命名空间。一切都在一个未命名的函数中定义，在定义后立即执行。从概念上讲，它相当于将所有内容都写出来，但这避免了使用全局变量。

    • 2