HTML变化背景下的JavaScript

我不知道我在做什么。我认为我的html一切都很好，然后我不得不添加一些简单的javascript。 我只是想在用户单击按钮时更改背景颜色

这就是我到目前为止所做的：

CSS

Javascript

function changeBackground() {
    if (document.body.style.backgroundColor = 'grey')
    {
        document.body.style.backgroundColor = 'black';
    }
    else
    {
        document.body.style.backgroundColor = 'grey';
    }
}

Html

点击我！

试试：

---

您的

if

子句错误（您正在指定而不是测试背景色）：

试试这个

问题是您使用的是

赋值运算符=

而不是

比较运算符==或==

function changeBackground() {

  if (document.body.style.backgroundColor == 'grey') {
    document.body.style.backgroundColor = 'red';
  } else {
    document.body.style.backgroundColor = 'grey';
  }
}

---

希望这对你有帮助，

李察，我会为所有其他答案提供一个备选方案，你应该在你开发的所有Web前端中考虑下面的结构。 HTML是你显示的内容，JS是它的行为，CSS是它的样式

也就是说，尽量避免使用JS设置元素的样式，而是切换一个类并允许CSS来完成这项工作。在你的情况下，你可以写：

function changeBackground()
{
   $(body).toggleClass('dark');
}

<button type="button" onclick="changeBackground()">
   Click Me!
</button>

body
{
   background-color: grey;
}

body.dark
{
   background-color: black;
}

函数changeBackground（）
{
$（body.toggleClass（'dark'）；
}
点击我！
身体
{
背景颜色：灰色；
}
身体黑
{
背景色：黑色；
}

在这里，我们只是简单地在body元素上切换一个类，CSS将相应地“响应”。我们有一个清晰的关注点分离

---

你可以选择你的类名来比

dark

更有意义，但是你的JS并不关心颜色和样式的细节。

糟糕的代码样式和糟糕的代码设计…确保你在帖子中的任何代码前插入4个空格。谢谢ketan，我不知道如何使用这个网站。第一次使用它。在铬上效果很好。您应该为代码使用适当的html结构…下面添加了代码！谢谢大家，这只是一件小事把事情搞砸了。第一次使用这个网站，会回来，如果我需要更多的帮助。希望下次我不会是个新手对于初学者来说，这个答案是正确的。在实现时，它需要jQuery（问题没有这样做）。@JohannesJander-它的标签是

jQuery

I knowledge，@JᴀʏMᴇᴇ, 我想为初学者明确地指出这一点。这个问题是在一个非常基本的层面上，所以在国际海事组织，答案应该提供很多的帮助。

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

function changeBackground() {
    if (document.body.style.backgroundColor == 'grey'){
        document.body.style.backgroundColor = 'black';
    } else {
        document.body.style.backgroundColor = 'grey';
    }
}

function changeBackground() {

  if (document.body.style.backgroundColor == 'grey') {
    document.body.style.backgroundColor = 'red';
  } else {
    document.body.style.backgroundColor = 'grey';
  }
}

function changeBackground()
{
   $(body).toggleClass('dark');
}

<button type="button" onclick="changeBackground()">
   Click Me!
</button>

body
{
   background-color: grey;
}

body.dark
{
   background-color: black;
}