Javascript 按钮单击更改背景

Question

当我按下按钮时，背景颜色没有改变。我做错了什么？

var body = document.getElementsByTagName("body");
var bgbutton = doucument.getElementById("bgchange");
bgbutton.onclick = function() {
  body.style.background-color = "green";
}

body {
  width: 600px;
  margin: 0 auto;
  background-color: #FF9500;
  padding: 0 20px 20px 20px;
}

<div id="wrapper"></div>
<button id="bgchange"></button>

Answer 1

document.getElementsByTagName 返回一个节点列表，因此您需要使用 [0] 从中选择一个元素:

var body = document.getElementsByTagName("body")[0];

但是，您可以使用一个特定的属性:

var body = document.body;

另外，您在以下行中有一个拼写错误:

var bgbutton = doucument.getElementById("bgchange");

...应该是文档...

并且，当用 JavaScript 编写时，样式属性名称采用驼峰式命名:

body.style.backgroundColor

...与它们在 CSS 中的编写方式相反(background-color)。