Seven circles but only one is changing colour, why?

Question

I am new to javascript and I have an assignment to create seven circles which should change colour on a mouse click. The first circle is changing colour but the other six just r

Answer 1

You have multiple element with same id. Instead of id use class and add event listener to it

var circle = document.getElementsByClassName("circle");
let colors = ['orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];

[...circle].forEach(function(item, index) {
  item.addEventListener('click', function(e) {
    item.style.fill = colors[index]
  })
})

 Rainbow Colours