Question

我编写了这段简短的代码来显示一个将背景颜色更改为蓝色的按钮。甚至在我单击按钮之前背景颜色就发生了变化，我只是不知道为什么，在我单击按钮之前，默认情况下背景不应该是白色的吗？

//function to change background color
function changeBg(color) {
    document.body.style.backgroundColor = color;
}

// goBlue closure
var goBlue = changeBg("blue");

// create button
var blueButton = document.createElement("button");
blueButton.innerHTML = "Blue";

// add button to page
var body = document.getElementsByTagName("body")[0];
body.appendChild(blueButton);

//add event listener
blueButton.addEventListener("click", goBlue);

感谢您的帮助

Answer 1

那是因为你在第 7 行调用了这个函数！

var whatever = changeBg("blue") // <<<< Bam! BG is now blue
// and the value of whatever is undefined since the function is void

您可能想要的是：

const EL_body = document.querySelector("body");
const EL_btn = document.createElement("button");
const changeBodyBg = (color) => EL_body.style.backgroundColor = color;

EL_body.append(EL_btn);
EL_btn.innerHTML = "Blue";
EL_btn.addEventListener("click", () => changeBodyBg("blue"));

以上只是为了简单起见，我在 Arrow Functions 中使用了更好的函数命名和不同的语法，您将进行以下编辑：

// REMOVE LINE 7 and...

blueButton.addEventListener("click", function() {
  changeBg("blue")
});

Answer 2

var goBlue = changeBg("blue"); 将立即调用背景颜色更改。

相反，尝试将 changeBg 传递给事件侦听器中的匿名函数

function changeBg(color) {
  document.body.style.backgroundColor = color;
}

// create button
var blueButton = document.createElement("button");
blueButton.innerHTML = "Blue";

// add button to page
var body = document.getElementsByTagName("body")[0];
body.appendChild(blueButton);

blueButton.addEventListener("click", () => {
  changeBg("blue")
});

Answer 3

这是因为您调用了函数 changeBg 并且将函数 changeBg 的返回值（未定义）分配给 goBlue 变量。

var goBlue = changeBg("blue");

如果您想在单击按钮时更改颜色，则需要添加 addEventListener。

//function to change background color
function changeBg(color) {
  document.body.style.backgroundColor = color;
}

// create button
var blueButton = document.createElement("button");
blueButton.textContent = "Blue";

// add button to page
var body = document.getElementsByTagName("body")[0];
body.appendChild(blueButton);

//add event listener
blueButton.addEventListener("click", () => {
  changeBg("blue");
});

改变背景颜色的按钮

3 个答案: