使用JavaScript在元素上随机添加颜色

我正在尝试创建一个只有跨度元素的网格，你可以点击跨度顶部，它看起来像屏幕上的正方形，它们会随机改变颜色。颜色已设置在CSS上，因此类元素将相应更改。我知道用jQuery可以很容易地实现这一点，我已经做到了，但我正试图弄清楚如何用JavaScript实现这一点。我已经能够更改一个span元素，但不能更改其余元素，而且当我单击它时，它不会再更改颜色。所以我被困在这里了。 这是实际的项目：

这是我使用的JavaScript代码：

var colours=['red', 'orange', 'yellow','blue', 'green', 'indigo', 'violet'];


//Creating a function to return a random colour from the array


  var i= Math.floor(Math.random()*colours.length); //Generating a random number between 0 and the last index in our array
 var randomColour = colours[i];// Using our random number to pull a random item from the array using its index
  //console.log(randomColour);//returning our array item



//Creating Event Listeners


var spans = document.getElementsByTagName('span');
this.addEventListener('click', getRandomColourReturned);


  function getRandomColourReturned(){
    spans[0].className = randomColour; 

     if(spans[0].className=== randomColour){
      spans[0].className=== randomColour;
       //spans[0].classList.add(randomColour);


   }


 }//getRandomColourReturned function

---

您需要为每个元素绑定单击事件，并确保使用

功能

根据需要选择颜色

var colours = ['red', 'orange', 'yellow','blue', 'green', 'indigo', 'violet'],
    spanElements = document.getElementsByTagName('span');

for (var i = 0, iLen = spanElements.length; i < iLen; i++) {
  spanElements[i].addEventListener('click', getRandomColourReturned, false);
}

function getRandomColourReturned (e) {
  e.currentTarget.className = randomColour();
}

function randomColour () {
    return colours[Math.floor(Math.random()*colours.length)];
}

var colors=[“红色”、“橙色”、“黄色”、“蓝色”、“绿色”、“靛蓝”、“紫色”]，
spanElements=document.getElementsByTagName（'span'）；
对于（var i=0，iLen=spanElements.length；i

就像这样

var colours=['red', 'orange', 'yellow','blue', 'green', 'indigo', 'violet'];
//Creating Event Listeners
var spans = document.getElementsByTagName('span');
this.addEventListener('click', getRandomColourReturned);

function getRandomColourReturned(event){
    var i= Math.floor(Math.random()*colours.length);
    var randomColour = colours[i];

    if(colours.indexOf(event.target.className) == -1) {
        event.target.className = randomColour; 
    }
}

---

随机数

i

永远不会改变。您可以在任何函数之外分配它一次。另外，您只更改了

span[0]

，这只是您的第一次

。兄弟，非常感谢您。因为我对Javascript非常陌生，所以您编写的事件方法的含义是什么？我了解重新启动。因此，有时，当我两次单击同一跨度时，它会保持相同的颜色，因为它随机选择了相同的颜色，我如何使用if语句来防止这种情况发生？只需添加一个判断：

colors.indexOf（event.target.className）=-1

，希望这能有所帮助。