当我们点击Javascript时，如何改变方块的颜色？

我已经使用事件侦听器写出了它，但它不起作用，即使点击它们也仍然黑色。我发现了一些我修正的拼写错误，但我不确定我是否正确使用getElementsByClassName。当我们点击Javascript时，如何改变方块的颜色？

HTML：

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<style> 
    .square { 
     width: 100px; 
     height: 100px; 
     background-color: #000000; 
     margin: 5px; 
    } 
    </style> 
    </head> 
<body> 

<div id="container"> 
<div class="square"></div> 
<div class="square"></div> 
<div class="square"></div> 
<div class="square"></div> 
</div> 

<script src="js/main.js"></script> 
</body> 
</html>

和JavaScript

var squares = document.getElementsByClassName('square'); 

for(var i = 0; i < squares.length; i++) { 
squares[0].addEventListener("click", changeColor); 
} 

function changeColor(event) { 
event.style.backgroundColor = randomColor(); 
} 


function randomColor() { 

var randomRed = Math.floor(Math.random() * 255); 
var randomGreen = Math.floor(Math.random() * 255); 
var randomBlue = Math.floor(Math.random() * 255); 
//create the string that is the ‘random color’ 
var randomColor = "rgb("+randomRed+","+randomGreen+","+randomBlue+")"; 

return randomColor; 
}

来源

2015-04-19 Mark Gregg

两个基本问题：

您的循环有一个硬编码squares[0]当它应该是squares[i]时，所以您将处理程序绑定到第一个元素多次而不是其他元素。
event对象没有style属性。使用this.style.backgroundColor - 在处理程序this内将引用clicked元素。或使用event.target.style.backgroundColor。

所以这样的：

for(var i = 0; i < squares.length; i++) { 
    squares[i].addEventListener("click", changeColor); 
} 

function changeColor(event) { 
    this.style.backgroundColor = randomColor(); 
}

演示：http://jsfiddle.net/oueLs5dp/

来源

2015-04-19 04:27:26 nnnnnn

-1

使用.addEventListener()你需要改变：

function changeColor(event) { 
event.style.backgroundColor = randomColor(); 
}

到

function changeColor(){ 
    // not using Event Object 
    this.style.backgroundColor = randomColor(); 
}

，但让我们面对吧.getElementsByClassName()反向不兼容。

我提出以下建议：

var doc = document, bod = doc.body; 
function E(e){ 
    return doc.getElementById(e); 
} 
function inArray(x, a){ 
    for(var i=0,l=a.length; i<l; i++){ 
    if(a[i] === x){ 
     return true; 
    } 
    } 
    return false; 
} 
function getElementsByClass(className, element){ 
    var r = false; 
    var el = element ? element : doc; 
    if(el.getElementsByClassName){ 
    r = el.getElementsByClassName(className); 
    } 
    else{ 
    var all = el.getElementsByTagName('*'), l = all.length; 
    if(l > 0){ 
     r = []; 
     for(var i=0; i<l; i++){ 
     var s = all[i].className.split(/\s/); 
     if(inArray(className, s))r.push(all[i]); 
     } 
    } 
    return r; 
} 
function randomColor(context){ 
    context.style.backgroundColor = 'rgb('+Math.floor(Math.rand()*256)+','+Math.floor(Math.rand()*256)+','+Math.floor(Math.rand()*256)+')'; 
}

现在是这样的：

var all = getElementsByClass('square'); 
for(var i=0,l=all.length; i<l; i++){ 
    (function(i){ // in case you want to add more array stuff 
    all[i].onclick = function(){ 
     randomColor(this); 
     // do more stuff here 
    } 
    })(i); // end of closure 
}

注：Math.random()返回0到0.9之间的数字重复，从来没有1.你永远也不会得到255你现在的公式。

来源

2015-04-19 04:04:21 PHPglue

如果某个元素有多个类，则您的自定义'getElementsByClass（）'函数是否可以工作？ – nnnnnn

让我解决这个问题。 – PHPglue

-1

你应该使用JQuery来做到这一点，这是相对容易的。把这个链接你的脑袋标签之间：<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>然后把这个代码在你的JavaScript：

$(document).ready(function(){ 
    $('.square').click(function(){ 
     $('.square').addClass('green'); 
    }); 
});

这里是一个demo

来源

2015-04-19 04:11:00 Joshua

*“您应该使用jQuery”* - 不，您可以选择使用jQuery。这里没有“应该”。没有jQuery，这很容易。 – nnnnnn

@nnnnnn这是一个意见问题 – Joshua

我喜欢jQuery。我用它。我推荐它。但我仍然说“应该”夸大了它，特别是当OP没有用它来标记问题时。特别是当问题中的代码只需要改变六个字符即可完美工作。这在香草JS中实现并不困难。 – nnnnnn

答案很简单。我的codepen下面的改变按预期工作。：http://codepen.io/anon/pen/MwgEdm

首先，你需要修改你的循环，你引用索引0，而不是我的：

for(var i = 0; i < squares.length; i++) { 
     squares[i].addEventListener("click", changeColor); 
    }

其次，你需要引用“这个”你换色功能中，并传递e对于事件对象：

function changeColor(e) { 
    this.style.backgroundColor = randomColor(); 
}

来源

2015-04-19 04:42:19 Devnetics

道歉，我没有重新加载页面，并看到nnnnnn的答案，当我写这个和设置codepen。他在我做之前稍微回答了这个问题，请标记他是正确的。 – Devnetics

当我们点击Javascript时，如何改变方块的颜色？

回答

相关问题