No tengo idea de lo que estoy haciendo. Pensé que todo iba bien con html, luego tuve que agregar algunos javascript simples. Solo intento cambiar el color de fondo cuando el usuario hace clic en un botón.
Esto es lo que tengo hasta ahora:
Css
body {
background-color:grey;
}
Javascript
function changeBackground() {
if (document.body.style.backgroundColor = 'grey')
{
document.body.style.backgroundColor = 'black';
}
else
{
document.body.style.backgroundColor = 'grey';
}
}
Html
<button type="button" onclick="changeBackground()">
Click Me!
</button>
4 respuestas
Richard, ofreceré una alternativa a todas las otras respuestas, y debes considerar la siguiente estructura en todos los front-end web que desarrolles.
HTML es lo que muestra, JS es cómo se comporta , CSS es cómo tiene estilo .
Dicho esto, trate de evitar el diseño de elementos con JS, pero cambie una clase y permita que CSS haga el trabajo. En su caso, podría escribir:
function changeBackground()
{
$(body).toggleClass('dark');
}
<button type="button" onclick="changeBackground()">
Click Me!
</button>
body
{
background-color: grey;
}
body.dark
{
background-color: black;
}
Aquí, simplemente estamos alternando una clase dentro y fuera del elemento del cuerpo, el CSS 'responderá' en consecuencia. Tenemos una agradable separación clara de preocupaciones.
Puede elegir el nombre de su clase para que tenga más sentido que dark
, pero la idea es que su JS no se preocupa por los colores y detalles del estilo.
Pruebe el FIDDLE,
El problema es que está utilizando assignment operator =
en lugar de comparison operator == or ===
function changeBackground() {
if (document.body.style.backgroundColor == 'grey') {
document.body.style.backgroundColor = 'red';
} else {
document.body.style.backgroundColor = 'grey';
}
}
Espero que esto funcione para usted
Su cláusula if
es incorrecta (está asignando en lugar de probar el color de fondo):
function changeBackground() {
if (document.body.style.backgroundColor == 'grey'){
document.body.style.backgroundColor = 'black';
} else {
document.body.style.backgroundColor = 'grey';
}
}
Tratar:
$("button").click(function(){
$("body").css("background-color", "blue");
});
Preguntas relacionadas
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.