Cada cuadrado tiene un color aleatorio. Por ejemplo, el rosa se vuelve verde, el naranja se vuelve rosa, etc. ¿Cómo puedo cambiar los fondos?
<section> <div id="one"></div> <div id="two"></div> <div id="three"></div> <div id="four"></div> <button id="btn">Click Me</button> </section> let colors = ["pink" , 'yellow' , 'green' , 'blue'] let btn = document.getElementById('btn') let one = document.getElementById('one') let two = document.getElementById('two') let three = document.getElementById('three') let four = document.getElementById('four') one.style.backgroundColor = colors[0] two.style.backgroundColor = colors[1] three.style.backgroundColor = colors[2] four.style.backgroundColor = colors[3] btn.addEventListener('click' , function(){ let randomColor = colors[Math.floor(Math.random() * colors.length)] one.style.backgroundColor = randomColor })y luego no puedo entender que hacer
Pruebe este en su lugar, que es más fácil usando forEach loop.
Use unshift para mover el último elemento a la parte superior de la matriz cada vez que el usuario haga clic en él.
let colors = ["pink" , 'yellow' , 'green' , 'blue'] //Assign orginial color: document.querySelectorAll('div').forEach((item,index)=>{ item.style.backgroundColor = colors[index] }) document.querySelector('#btn').addEventListener("click",function(){ document.querySelectorAll('div').forEach((item,index)=>{ item.style.backgroundColor = colors[index] }) colors.unshift(colors.splice(colors.length-1, 1)[0]); }) <div id="one">1</div> <div id="two">2</div> <div id="three">3</div> <div id="four">4</div> <button id="btn">Click Me</button>