Js背景颜色转换器

Question

每个正方形都有一个随机的颜色。例如，粉红色变成绿色，橙色变成粉红色等等。我该如何更改背景？

<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
})

然后我不明白该怎么做

Answer 1

试试这个，使用forEach循环更容易。

每次用户单击最后一个元素时，使用unshift将其移动到数组顶部。

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>