How do I write a simple for loop to iterate over span elements and assign each one a color from an array in an indexical order? So the B will be red, the E orange etc.
const colors = ['red', 'orange', 'yellow', 'green']; <h1>
<span>B</span>
<span>E</span>
<span>A</span>
<span>R</span>
</h1>
You can first try getting all the elements using Document.querySelectorAll() then loop through them using Array.prototype.forEach() to set the color using Math.random().
Try the following way:
const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
//get all the elements
const elements = document.querySelectorAll('h1 > span');
//declare an array to store all the used colors
const usedColors = [];
//loop through all the elements
elements.forEach(function(span){
//get color randomly from the array
var c = colors[Math.floor(Math.random()*colors.length)];
//check if the color is already used and loop to get new color
while(usedColors.includes(c)){
//take another color from the array
c = colors[Math.floor(Math.random()*colors.length)];
}
//push to the used color array
usedColors.push(c);
//set the color to the element
span.style.color = c;
});<h1>
<span>B</span>
<span>E</span>
<span>A</span>
<span>R</span>
</h1>Update: It seems simpler using the index like the following way:
const colors = ['red', 'orange', 'yellow', 'green'];
//get all the elements
const elements = document.querySelectorAll('h1 > span');
//loop through all the elements
elements.forEach(function(span, i){
//set the color to the element using index i
span.style.color = colors[i];
});<h1>
<span>B</span>
<span>E</span>
<span>A</span>
<span>R</span>
</h1>
//I declared a variable 'abc' to be the span tags.
const abc = document.querySelectorAll('span');
//Basically Iterating over each span tag and the array of colours and assigning them to each other.
for (let index = 0; index < abc.length; index++){
abc[index].style.color = colors[index];}
This should work
