Question

我已经完成了Javascript codeacademy的学习。我现在正在练习我的香草JS技能。

我正在尝试构建一个非常简单的代码，每次单击一个按钮时都会更改div的背景（我意识到我可以直接通过ID选择div，但我使用不同的选择器类型和方法，所以我可以使用他们）

document.getElementById("changeColor").addEventListener("click", function() {
  var div = document.getElementById("child").parentNode;
  var random = Math.floor(Math.random() * colors.length);
  var colors = ["AliceBlue", "AntiqueWhite", "Aqua", "Aquamarine"];
  div.style.backgroundColor = colors[random];
})

<div id="example" style="width: 500px; height: 200px; border: solid black 1px; padding: 10px;">
  <p id="child">This is just a quick test</p>

</div>

<button id="changeColor">Change Color</button>

Answer 1

您的colors变量已在第4行初始化，并且您之前尝试过访问它。

你可以切换两行，它会起作用：

document.getElementById("changeColor").addEventListener("click", function(){
   var div = document.getElementById("child").parentNode;
   var colors = ["AliceBlue","AntiqueWhite","Aqua","Aquamarine"];
   var random = Math.floor(Math.random() * colors.length);
   div.style.backgroundColor = colors[random];
})

<div id="example" style="width: 500px; height: 200px; border: solid black 1px; padding: 10px;" >
<p id="child">This is just a quick test</p>

</div>

<button id="changeColor">Change Color</button>

通过点击事件

1 个答案: