如何使用 3 个不同的数组更改 3 个 div 的颜色

Question

当我单击“更改主题”按钮时，如何使用提供的 3 个数组更改 3 个 div 的颜色。<script>var colors = ['red', 'green', 'blue']var colors1 = ['teal', 'brown', 'tan']var colors2 = ['orange', 'purple', 'black'];var boxed = document.querySelectorAll(".box");var button = document.querySelector("button");button.addEventListener("click", function () {   for (i = 0; i < boxed.length; i++) {        boxed[i].style.backgroundColor = colors[Math.floor(Math.random() * 3)];        boxed[i].style.width = '100px';        boxed[i].style.height = '100px';        boxed[i].style.display = 'inline-block';  }});button.style.cursor = "pointer";</script>

Answer 1

我想你想要这样的东西-

更新了需求的代码

var colors = [

  ['red', 'green', 'blue'],

  ['teal', 'brown', 'tan'],

  ['orange', 'purple', 'black']

]

var boxed = document.querySelectorAll(".box");

var button = document.querySelector("button");

button.addEventListener("click", function () {

    let colorIndex = Math.floor(Math.random() * 3);

   for (i = 0; i < boxed.length; i++) {

         

        boxed[i].style.backgroundColor = colors[colorIndex][i];

        boxed[i].style.width = '100px';

        boxed[i].style.height = '100px';

        boxed[i].style.display = 'inline-block';

  }

});

button.style.cursor = "pointer";

.box {

  width: 100px;

  height: 100px;

  display: inline-block;

  background: gray;

}

<div class="box">1</div>

  <div class="box">2</div>

  <div class="box">3</div>

  <button>Theme</button>

Answer 2

类似的东西？

const colors= [ ['red', 'green', 'blue']

              , ['teal', 'brown', 'tan']

              , ['orange', 'purple', 'black'] ]

  ,   boxed  = document.querySelectorAll(".box")

  ,   button = document.querySelector("button")

  ;

button.onclick=_=>

  {

  let colorN = Math.floor(Math.random() *3)

  boxed.forEach((box,i)=>

    {

    box.style.backgroundColor = colors[colorN][i];

    })

  }

.box {

  display: inline-block;

  width: 100px;

  height: 100px;

  background-color: lightgrey;

}

<div class="box">box 1</div>

<div class="box">box 2</div>

<div class="box">box 3</div>

<button>change Colors</button>