Skip to main content

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("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) {
          document.getElementById("boton")boton.style.backgroundColor= "red";
      } else {
          document.getElementById("boton")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.

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("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) {
          document.getElementById("boton").style.backgroundColor= "red";
      } else {
          document.getElementById("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.

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.

se eliminaron 104 caracteres en el cuerpo
Origen Enlace
abulafia
  • 58.7k
  • 3
  • 54
  • 89

No está muy claro qué pretendías al asignar al evento clic dos funciones, pero la segunda que asignas, sustituye a la primera, de ahí que el botón rojo nunca fuera visible.

Si Si lo que pretendíasquerí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("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) {
          document.getElementById("boton").style.backgroundColor= "red";
      } else {
          document.getElementById("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.

No está muy claro qué pretendías al asignar al evento clic dos funciones, pero la segunda que asignas, sustituye a la primera, de ahí que el botón rojo nunca fuera visible.

Si lo que pretendí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("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) {
          document.getElementById("boton").style.backgroundColor= "red";
      } else {
          document.getElementById("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.

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("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) {
          document.getElementById("boton").style.backgroundColor= "red";
      } else {
          document.getElementById("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.

Origen Enlace
abulafia
  • 58.7k
  • 3
  • 54
  • 89

No está muy claro qué pretendías al asignar al evento clic dos funciones, pero la segunda que asignas, sustituye a la primera, de ahí que el botón rojo nunca fuera visible.

Si lo que pretendí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("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) {
          document.getElementById("boton").style.backgroundColor= "red";
      } else {
          document.getElementById("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.