How can I change multiple CSS elements property at once and loop infinitely?

Question

So I'm trying to make it where all the boxes change color whenever I click on the button and make it run continuously until I click the button again to stop it.

I tried querySelectorAll() but it only changes the first box's color

Here is my codepen showing what is happening https://codepen.io/designextras/pen/bGEowbO

Here is the javascript below

const colorBtn = document.querySelector('#btn-1')
const boxes = document.querySelector('.box')


function getRandomColor() {
  let letters = '0123456789ABCDEF';
  let color = '#';
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

colorBtn.addEventListener('click', function(e) {
  let newColors = getRandomColor()
  boxes.style.background = newColors
})

Edit: I fixed it by adding a forEach()

colorBtn.addEventListener('click', function(e) {
  
  boxes.forEach(color => {
let newColors = getRandomColor()
    color.style.background = newColors
  })
})

user_13669048 · Answer

You need to use document.querySelectorAll to get all classes with box

Then you will do forEach loop and also call that getRandomColor function as well to get diffrent colors applied individually.

You can read more about looping with querySelectorAll here and explained in details

Run snippet below to see it all working.

const colorBtn = document.querySelector('#btn-1')
const boxes = document.querySelectorAll('.box')
var running = false

function getRandomColor() {
  let letters = '0123456789ABCDEF';
  let color = '#';
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

function start() {
  if (running) {
    boxes.forEach(color => {
      let newColors = getRandomColor()
      color.style.background = newColors
    })
    setTimeout(start, 500)
  }
}

colorBtn.addEventListener('click', function(e) {
  colorBtn.innerText = 'Stop'
  if (running) {
    running = false
    colorBtn.innerText = 'Change Color'
  } else {
    running = true
    start()
  }
})

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: 'Oswald', sans-serif;
}

body {
  background: radial-gradient(circle, rgba(51, 51, 51, 1) 0%, rgba(29, 19, 19, 1) 100%);
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 2rem auto;
  padding-top: 1rem;
  color: #fff;
  max-width: 60rem;
}

.btn-container {
  width: 60%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

.btn {
  padding: 1rem 3rem;
  background: linear-gradient(13deg, rgba(34, 81, 249, 1) 0%, rgba(19, 246, 255, 1) 100%);
  border: none;
  border-radius: 4px;
  font-size: 1.2rem;
  outline: none;
  cursor: pointer;
  color: #fff;
}

.box-container {
  width: 100%;
  height: 100%;
  background: red;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.box {
  background: blue;
  padding: 3rem 3rem;
}

#box-1 {
  background: white;
}

#box-2 {
  background: red;
}

#box-3 {
  background: green;
}

#box-4 {
  background: yellow;
}

#box-5 {
  background: orange;
}

#box-6 {
  background: blue;
}

user_1098303 · Answer

Don't forget the "All" in querySelectorAll:

const colorBtn = document.querySelector('#btn-1')
const boxes = document.querySelectorAll('.box') 
 

function getRandomColor() {
    let letters = '0123456789ABCDEF';
    let color = '#';
    for (let i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

colorBtn.addEventListener('click', function(e) {
boxes.forEach(x=>x.style.background = getRandomColor())
})

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: 'Oswald', sans-serif;
}

body {
    background: radial-gradient(circle, rgba(51,51,51,1) 0%, rgba(29,19,19,1) 100%);
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 2rem auto;
    padding-top: 1rem;
    color: #fff;
    max-width: 60rem;
}

.btn-container {
    width: 60%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

.btn {
    padding: 1rem 3rem;
    background: linear-gradient(13deg, rgba(34,81,249,1) 0%, rgba(19,246,255,1) 100%);
    border: none;
    border-radius: 4px;
    font-size: 1.2rem;
    outline: none;
    cursor: pointer;
    color: #fff;
}

.box-container {
    width: 100%;
    height: 100%;
    background: red;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.box {
    background: blue;
    padding: 3rem 3rem; 
}

#box-1 {
    background: white;
}


#box-2 {
    background: red;
}

#box-3 {
    background: green;
}

#box-4 {
    background: yellow;
}

#box-5 {
    background: orange;
}

#box-6 {
    background: blue;
}

Also, I think you want to have different colors for each box, so I changed a bit your code.

How can I change multiple CSS elements property at once and loop infinitely?

2 Answers