Can't see a bug in my code

JavaScript
1

Hello guys, am trying to change background color of a page with just a button, not working, help me check it out. here is my code:

function changeColor(){
  const btn = document.getElementById('btn');
  const colors = ['red', 'orange', 'blue', 'yellow', 'green', 'purple', 'black', 'white'];
  for(let color of colors){
      document.body.style.backgroundColor = color;
  }
};

btn.addEventListener('click', changeColor);
3

At a guess, you might want to add a delay. A button click will immediately cycle thru all the colors array, ending back at white before the display has updated.

4

You are adding the eventlistener outside the function to the variable you declared inside the function. Since const is a block-scoped variable it won’t be accessable from outside the function.

So you will have to select the btn-element outside the function.
With that you don’t have to get the element again inside the function since the eventlistener will pass in the event as a parameter by default.

document.getElementById('btn').addEventListener('click', changeColor);

function changeColor(){
  const colors = ['red', 'orange', 'blue', 'yellow', 'green', 'purple', 'black', 'white'];
  for(let color of colors){
      document.body.style.backgroundColor = color;
  }
}

Also note here that the loop won’t do as you expect it to do. It will cycle through the array so fast that you won’t see any changes on the DOM.
It’s better to use an interval.

function changeColor(){
  const colors = ['red', 'orange', 'blue', 'yellow', 'green', 'purple', 'black', 'white'];
 let i = 0;
  setInterval( () => {
    document.body.style.background = colors[i];
    i++;
    if(i === colors.length){
      this.clearInterval();
    }
  }, 500);
}

This will also loop the colors, but with a 0.5 sec delay between each interval.
When it reaches the total length of the array it will clear itself, otherwise the loop will go on for infinite.

5

May I offer a different solution.

I’m speaking from a web developer perspective. Rarely do I use JS to manipulate the styling of a page. I always try to use CSS to do the styling. It runs smoother and faster.

A major con for me using JS to change CSS styling is that it overwrites all CSS (with the exception of !important). I find it easier to just add classes to change the style of page.

Plus it makes it easier to identify what is changing a particular element’s style.

<html>
<head></head>
<body>

<a href="#" id="btn">Click Me</a>

<script>
document.addEventListener("DOMContentLoaded", function(){

  const btn = document.getElementById("btn");
  btn.addEventListener("click", function(){
    document.body.classList += "change_colors";
  });


}, false);
</script>

<style>

.change_colors {
  animation: rainbow 5s infinite;
}

@keyframes rainbow {
    0%   {background-color: red;}
    14%  {background-color: orange;}
    28%  {background-color: blue;}
    42%  {background-color: yellow;}
    56% {background-color: green;}
    70% {background-color: purple;}
    84% {background-color: black;}
    100% {background-color: white;}
}

</style>

</body>
</html>```
6

Thanks everyone. I actually did a little editing and it worked!

let btn = document.getElementById('btn');
btn.addEventListener('click', changeColor);
function changeColor(){
	let colors = ['red', 'orange', 'blue', 'yellow', 'green', 'purple', 'black', 'white'];
	for(let index = 0; index < colors.length; index++){
  	let num = Math.floor(Math.random() * colors.length);
    document.body.style.backgroundColor = colors[num];   
  }
}