0

Al presionar el botón cambiar fondo no me va cambiando los colores. Lo extraño es que con colores como green o red si me cambia, los código de colores los encontré en internet

'use strict'

window.addEventListener("load",function(){

var titulo = document.getElementById("divTitulo");
var contenido = document.getElementById("divContenido");
var btnContenido = document.getElementById("btnContenido");

btnContenido.style.padding="10px";
btnContenido.style.fontSize="15px";
contenido.style.background="#FFFFFF";

function fondoContenido(){
    if(contenido.style.background=="#0099FF"){
        contenido.style.background="#009966";
    }else if(contenido.style.background=="#009966"){
        contenido.style.background="#FFFFFF";
    }else{
        contenido.style.background="#0099FF";
    }
}

btnContenido.addEventListener("click",function(){
    fondoContenido();
});

});


codigo httml:

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8"/>
        <script type="text/javascript" src="practica.js"></script>
        <title>Mi practica</title>
    </head>
    <body>
        <div id="divContenido">
            <h2 id="miTitulo">Limbert_Art</h2>
            <p>Limbert_Art es un emprendimiento de retratos realistas, que inicialmente nace por el 
                deseo de aprender a dibujar personas, y con el pasar del tiempo la técnica se fue
                perfeccionando hacia el realismo.</p>
            <p>Los materiales que se usan para los retratos son:<br>
                Cartulina: marfil y escolar.<br>
                Lapices: grafito y colores profesionales.
            </p>
            <p>
                <button id="btnContenido">Cambiar Color</button>
            </p>
        </div>
    </body> 
    
</html>

1 respuesta 1

0

'use strict'

window.addEventListener( "load", function() {
    var titulo = document.getElementById( "divTitulo" );
    var contenido = document.getElementById( "divContenido" );
    var btnContenido = document.getElementById( "btnContenido" );
    btnContenido.style.padding = "10px";
    btnContenido.style.fontSiz e= "15px";
    contenido.style.background = "FFFFFF";
    let color = "a";
    function fondoContenido() {
        if( color == "a" ) {
            contenido.style.background = "#009966";
            color = "b";
        }
        else if( color == "b" ) {
            contenido.style.background = "#FFFFFF";
            color = "c";
        }
        else{
            contenido.style.background = "#0099FF";
            color = "a";
        }
    }

    btnContenido.addEventListener( "click", function() {
        fondoContenido();
    });

});
<html>
    <head>
        <meta charset="utf-8"/>
        <script type="text/javascript" src="practica.js"></script>
        <title>Mi practica</title>
    </head>
    <body>
        <div id="divContenido">
            <h2 id="miTitulo">Limbert_Art</h2>
            <p>Limbert_Art es un emprendimiento de retratos realistas, que inicialmente nace por el 
                deseo de aprender a dibujar personas, y con el pasar del tiempo la técnica se fue
                perfeccionando hacia el realismo.</p>
            <p>Los materiales que se usan para los retratos son:<br>
                Cartulina: marfil y escolar.<br>
                Lapices: grafito y colores profesionales.
            </p>
            <p>
                <button id="btnContenido">Cambiar Color</button>
            </p>
        </div>
    </body> 
    
</html>

Dado que la comparación de colores es problemática, lo que hice fue crear una variable que "acompaña" a los cambios de color, y es con ella que hago las comparaciones para saber cual es el color a aplicar.
Espero que te sea de utilidad!!.

1
  • muchas gracias lo probaré Commented el 20 feb. 2023 a las 16:36

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.