0

Muy buenas a todos, soy nuevo en esto de javascript y he tenido un problema al parecer sencillo pero no he podido darme cuenta cual es el error:

Tengo un sencillo boton que cambia de color con el evento onclick, lo que sucede es que si bien la primera vez que se le oprime se pone verde, ya la segunda y veces posteriores no va a colocarse rojo, me preguntaba si en mi codigo hay algun tipo de error.

var boton = document.getElementById('boton');

function cambiarColor() {
  var bg = boton.style.background;
  if (bg == "green") {
    boton.style.background = "red";
  } else {
    boton.style.background = "green";
  }

  return true;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Eventos</title>
</head>

<body>
  <h1>EVENTOS EN JS</h1>
  <button id="boton" onclick="cambiarColor();">Presioname</button>
  <script src="js-1.js"></script>
</body>

</html>

5
  • Si depuras con console.log(bg), verás que cuando estableces "green" al background del botón, es "green none repeat scroll 0% 0%" y no "green", por lo que la condición del if no funcionará.
    – track3r
    el 8 nov. 2019 a las 0:38
  • Me percate de esto pero no le di importancia, cómo podría solucionarlo ?
    – Santiago
    el 8 nov. 2019 a las 3:36
  • Bienvenido Santiago... viendo el ejemplo que pusiste en tu pregunta al parecer no existe ningun problema. El código hace exactamente lo que quieres... pruebalo desde la misma pregunta y veras el 8 nov. 2019 a las 3:55
  • Hola, Victor, muchas gracias. Tendré algún problema con mi navegador, ya que bien ustedes me dicen que les sirvio el codigo pero pues yo si estoy presentando el inconveniente que les comente en mi pregunta.
    – Santiago
    el 8 nov. 2019 a las 4:19
  • Hola Victor, tal como indica Carlos Escobar su solución debería funcionar, yo lo hice distinto, en lugar de la condición "green" en el if, puse "green none repeat scroll 0% 0%" que es lo que devuelve "bg" y por tanto, también funciona. Edito para indicar que puede que var botón, al estar fuera de la función, pierda su valor, mejor pónlo como lo tienes tu y solo cambia el if como indica Carlos. Te paso un enlace que lo aclara, aunque en inglés: stackoverflow.com/questions/9421208/…
    – track3r
    el 8 nov. 2019 a las 22:13

1 respuesta 1

0

Te comparto la manera en que lo realicé, la diferencia de mi código y el tuyo está en el if. Puedes mirar el código aquí. Te dejé unos comentarios en el código para que lo comprendas mejor.

De todas formas aquí el código.

    // CREAMOS UNA VARIABLE QUE GUARDA TODAS LAS PROPIEDADES DEL BOTON CON EL #ID btn
    var boton = document.getElementById('btn');

    // LA MANERA CORRECTA DE USAR JAVASCRIPT PURO ES CREAR LAS FUNCIONES PRIMERO Y MÁS ABAJO INVOCARLAS O ASIGNARLAS AL OBJETO QUE LO USARÁ.

    function CambiarColor(){ //CREAMOS LA FUNCION LLAMADA CambiarColor
        if(boton.style.background != 'blue'){ //HACERMOS UNA CONDICIÓN IF PARA COMPROBAR SI EL OBJETO ES DE UN COLOR DIFERENTE A BLUE.
        
            boton.style.background="blue"; //SI LA CONDICIÓN SE CUMPLE, LE CAMBIAMOS EL COLOR A BLUE.
        }else{ //SI NO SE CUMPLE LA CONDICIÓN ANTERIOR ES QUE EL OBJETO SI ES BLUE

            boton.style.background="red"; //COMO EL OBJETO ES DE COLOR BLUE, LO CAMBIAREMOS A COLOR RED.
        }
        return true; 
    }

    /* POR ÚLTIMO USAMOS NUESTRA VARIABLE Y ACTIAVAMOS EL EVENTO CLICK, PARA USARLOS ES NECESARIO USAR EL METODO "addEventListener" QUÉ RECIBE DOS VALORES
    1.- EL NOMBRE DEL EVENTO A UTILIZAR
    2.- UNA FUNCIÓN.

    EL PRIMER VALOR SERÁ CLICK, EL SEGUNDO VALOR SERÁ UNA FUNCIÓN QUE EJECUTARÁ NUESTRA FUNCIÓN <CambiarColor>
    */
    boton.addEventListener("click", function(){
          CambiarColor();
    });
<!-- TITULO -->
<h1>EVENTOS EN JS</h1>

<!-- BOTÓN QUE REALIZARÁ UNA ACCIÓN -->
<button class="" id="btn">Presioname</button> 

3
  • Hola, Carlos, aprecio tu atención al ayudarme con el problema, pero tiene el mismo inconveniente al menos para mí, el botón se queda en azul y ya está. No sé si pueda ser algún problema con el navegador.
    – Santiago
    el 8 nov. 2019 a las 3:17
  • ¿Te pasa lo mismo con el link que te dejé? Ahora que ejecuto tu código desde la opción que da stackOverflow igual me funciona tu código. Prueba en otro navegador.
    – Carlos
    el 8 nov. 2019 a las 3:24
  • Nada, sigue el mismo error, en todos los navegadores los eventos no funcionan con normalidad, a qué se puede deber esto?
    – Santiago
    el 8 nov. 2019 a las 3:34

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.