JavaScript en HTML cambia de fondo

Question

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>

javascript jquery html css

-5

Richard 10 dic. 2015 a las 12:08

Answer 1

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.

1

user1017882user1017882 10 dic. 2015 a las 09:51

Answer 2

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

0

Mayank 10 dic. 2015 a las 09:21

Answer 3

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';
    }
}

3

Johannes Jander 10 dic. 2015 a las 09:19

Answer 4

Tratar:

$("button").click(function(){
  $("body").css("background-color", "blue");
});

0

Dray 10 dic. 2015 a las 09:16

JavaScript en HTML cambia de fondo

4 respuestas

Preguntas relacionadas

Nuevas preguntas

javascript