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>