1

Tengo un código Javascript con el que estoy tratando una tarea simple. Procedo a compartir los códigos HTML, CSS y JS, si me pudieran ayudar a indicar si hay algún error en los códigos. Deberia cambiar el fondo de color si doy click a claro, obviamente un color claro, lo mismo con el oscuro, pero no cambia nada, sea cual sea el botón que clickee.

//gesturess.js
var app{
	inicio: function(){
		var botonClaro =  document.querySelector('#claro');
		var botonOscuro = document.querySelector('#oscuro');

		botonClaro.addEventListener('click',this.ponloClaro,false);
		botonOscuro.addEventListener('click',this.ponloOscuro,false);
	},

	ponloClaro: function(){
		document.body.className: 'claro';
	},
	ponloOscuro: function(){
		document.body.className: 'oscuro';
	},



};

app.inicio();
//gestures.css
body{
	background-color: #8eadc5;
}
body.claro{
	background-color: #f3e1bd;
}
body.oscuro{
	background-color: #577a76;
}
button{
	background-color: #7fba67;
	color: #ffffff;
	border: none;
	width: 100%;
	padding: 30px;
	font-size: 1em;
	margin-top: 10px;
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <link rel="stylesheet" type="text/css" href="css/gestures.css">

        <title>Prueba App</title>
    </head>
    <body>
       
        <script type="text/javascript" src="js/gestures.js"></script>

        <button id="claro">CLARO</button>
        <button id="oscuro">OSCURO</button>
    </body>
</html>

2
  • 1
    ¿Cuál es el error? ¿Cuál es el comportamiento deseado? Debes explicarte mejor para poder ayudarte. el 3 feb. 2019 a las 18:14
  • @MauricioContreras he editado la pregunta el 3 feb. 2019 a las 18:20

1 respuesta 1

4

Hay 3 errores en tu código javascript:

La linea 2:

var app{

Debe ser:

var app = {

La linea 12:

document.body.className: 'claro';

Debe ser:

document.body.className = 'claro';

La linea 15:

document.body.className: 'oscuro';

Debe ser:

document.body.className = 'oscuro';

Además, te recomendo mover el script jsto antes del </body>.

Al final tu código quedaría así:

//gesturess.js
var app = {
    inicio: function(){
        var botonClaro =  document.querySelector('#claro');
        var botonOscuro = document.querySelector('#oscuro');

        botonClaro.addEventListener('click',this.ponloClaro,false);
        botonOscuro.addEventListener('click',this.ponloOscuro,false);
    },

    ponloClaro: function(){
        document.body.className = 'claro';
    },
    ponloOscuro: function(){
        document.body.className = 'oscuro';
    },
};

app.inicio();
//gestures.css
body{
	background-color: #8eadc5;
}
body.claro{
	background-color: #f3e1bd;
}
body.oscuro{
	background-color: #577a76;
}
button{
	background-color: #7fba67;
	color: #ffffff;
	border: none;
	width: 100%;
	padding: 30px;
	font-size: 1em;
	margin-top: 10px;
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <link rel="stylesheet" type="text/css" href="css/gestures.css">

        <title>Prueba App</title>
    </head>
    <body>

        <button id="claro">CLARO</button>
        <button id="oscuro">OSCURO</button>

        <script type="text/javascript" src="js/gestures.js"></script>
    </body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.