I'm trying to loop through colors and change the text of an h1 to one of the colors in the loop
<h1>Color Change </h1>
<button id="btn">Click Here</button>
const btn = document.querySelector('#btn')
btn.addEventListener('click', () => {
const h1 = document.querySelector('h1')
const colors = ['red', 'yellow', 'brown', 'green', 'blue']
for (let i = 0; i < colors.length; i++) {
h1.style.color = colors[i]
}
})
It's only returning the last color, while I want to loop through all of the colors. I'm not sure why
You don't want to loop over all the colours when you click the button. You should keep a count of the current colour index, update the text colour, and then increase the count.
My usual technique for this kind of problem is to use a closure so we limit the number of global variables we use.
const btn = document.querySelector('#btn')
const h1 = document.querySelector('h1');
btn.addEventListener('click', handleClick(), false);
const colors = ['red', 'yellow', 'brown', 'green', 'blue'];
// Closures work by returning a function from
// the function that is called which maintains
// a copy of its local lexical envionment (in
// this case `count`). The function that is returned
// is the function assigned to the button click listener
// So, we initialise the count to zero
function handleClick(count = 0) {
// Return a function that maintains a copy
// of `count`
return function () {
// If the count is less than the length
// of the colors array change the text colour
// and then increase the count
if (count < colors.length) {
h1.style.color = colors[count];
++count;
}
}
}<h1>Color Change </h1>
<button id="btn">Click Here</button>Try to outline the algorithm in plain human language first:
Now you can convert this to the code:
// there is a title element, a button element, and a predefined set of colors
const h1 = document.querySelector('h1')
const btn = document.querySelector('#btn')
const colors = ['red', 'yellow', 'brown', 'green', 'blue'];
// no color is chosen initially
let currentColorIndex = -1;
// whenever the button is clicked ...
btn.addEventListener('click', () => {
// grab the next color from the set (if the current color is the last one, grab the first one then)
const nextColorIndex = ++currentColorIndex % colors.length;
// apply the next color to the title element
h1.style.color = colors[nextColorIndex];
});<h1>Color Change </h1>
<button id="btn">Click Here</button>I think the logic you're after is to loop through the colors at each click:
const btn = document.querySelector('#btn')
const h1 = document.querySelector('h1')
const colors = ['red', 'yellow', 'brown', 'green', 'blue']
let i = 0;
btn.addEventListener('click', () => {
h1.style.color = colors[i]; // to change the color
h1.innerHTML = colors[i]; // to change the text
i = (i + 1) % colors.length;
})<h1>Color Change </h1>
<button id="btn">Click Here</button>