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

Как изменить цвет кнопки при нажатии с помощью JavaScript от Jupyter?

  • 772

Я прохожу курс по визуализации данных в Python, и прямо сейчас мы рассматриваем некоторые базовые вещи о HTML и Javascript.

Следующий код создает простое поле HTML с помощью команды %%hmtlиз блокнота 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>

Теперь для создания событий на ящике мы используем %%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, чтобы не дать botono contadorбыть глобальными переменными и не «загрязнить» глобальное пространство имен. Все определяется внутри безымянной функции, которая сразу после определения выполняется. Концептуально это эквивалентно записи всего, но это позволяет избежать использования глобальных переменных.

    • 2