时间戳

首页 > 解决方案 > 颜色切换按钮

javascript - 颜色切换按钮

问题描述

我想构建一个 Javascript 代码，当单击按钮时更改正文的背景颜色。控制台说这body.style.background不是一个功能。你能说出我的代码中的错误是什么吗？

var btn = document.querySelector("button");
var body = document.querySelector("body");
var colors = ["red", "blue", "green", "yellow", "orange", "pink"];
var i = 0;

btn.addEventListener("click", function(){
  if (i < colors.length) {
       i++;
  } else if (i == colors.length) {
       i = 0;
  }
 body.style.background("colors[i]");
});

标签： javascripthtmlarrays

解决方案

你需要做body.style.background = colors[i];asbackground的一个属性，style所以应该为它分配颜色的值，而不是把它作为一个函数调用并将参数传递给它。

var btn = document.querySelector("button");
var body = document.querySelector("body");
var colors = ["red", "blue", "green", "yellow", "orange", "pink"];
var i = 0;

btn.addEventListener("click", function(){
 if (i < colors.length) {
       i++;
  } else if (i == colors.length) {
       i = 0;
  }
 body.style.background = colors[i];
});
<body> 
  some content
  <button>Click</button>
</body>

您可以进一步重构您的代码，使其看起来更简单：

var btn = document.querySelector("button");
var body = document.querySelector("body");
var colors = ["red", "blue", "green", "yellow", "orange", "pink"];
var i = 0;
btn.addEventListener("click", function(){
 i = i < colors.length ? ++i : 0;
 body.style.background = colors[i];
});
<body> 
  some content
  <button>Click</button>
</body>

推荐阅读