2017-09-14 144 views
0

我已完成学习Javascript codeacademy。我现在正在练习我的香草JS技巧。通过单击事件更改div的背景颜色

我想构建一个非常简单的代码,每次单击一个按钮时都会更改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>

+0

我没有看到一个问题,你有什么需要帮助? –

+0

请确保检查浏览器控制台是否有错误。 –

回答

3

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>

+0

啊! Facepalm时刻!这样一个简单的错误......感谢德克尔的帮助。我很感激 – CoderAz