Javascript foreach 背景颜色变化

krisna 发表于 Dev

克里希纳

我正在练习 javascript。我创建了一个按钮。我有颜色数组。当按钮被点击时，我的背景颜色将会改变。我使用forEach了循环颜色数组的方法。单击按钮时，它会更改背景颜色一次，然后不再更改。我不知道我在犯什么错误。

这是我的代码：

const changeColorBtn = document.getElementById('btn');

changeColorBtn.addEventListener('click', function () {

  const colorArray = ['#6666FF', '#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6',
    '#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D',
    '#80B300', '#809900', '#E6B3B3', '#6680B3', '#66991A',
    '#FF99E6', '#CCFF1A', '#FF1A66', '#E6331A', '#33FFCC',
    '#66994D', '#B366CC', '#4D8000', '#B33300', '#CC80CC',
    '#66664D', '#991AFF', '#E666FF', '#4DB3FF', '#1AB399',
    '#E666B3', '#33991A', '#CC9999', '#B3B31A', '#00E680',
    '#4D8066', '#809980', '#E6FF80', '#1AFF33', '#999933',
    '#FF3380', '#CCCC00', '#66E64D', '#4D80CC', '#9900B3',
    '#E64D66', '#4DB380', '#FF4D4D', '#99E6E6'];

  colorArray.forEach((i, index) => {
    document.body.style.background = colorArray[index % i.length]
  })

})

<button id="btn">click</button>

总是帮助

您可以简单且最简单的方法是使用Math.floor和Math.random每次单击按钮时获得不同的颜色。

现场工作演示：

const changeColorBtn = document.getElementById('btn');

changeColorBtn.addEventListener('click', function() {

  const colorArray = ['#6666FF', '#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6',
    '#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D',
    '#80B300', '#809900', '#E6B3B3', '#6680B3', '#66991A',
    '#FF99E6', '#CCFF1A', '#FF1A66', '#E6331A', '#33FFCC',
    '#66994D', '#B366CC', '#4D8000', '#B33300', '#CC80CC',
    '#66664D', '#991AFF', '#E666FF', '#4DB3FF', '#1AB399',
    '#E666B3', '#33991A', '#CC9999', '#B3B31A', '#00E680',
    '#4D8066', '#809980', '#E6FF80', '#1AFF33', '#999933',
    '#FF3380', '#CCCC00', '#66E64D', '#4D80CC', '#9900B3',
    '#E64D66', '#4DB380', '#FF4D4D', '#99E6E6'
  ];

  colorArray.forEach((i, index) => {
    document.body.style.background = colorArray[Math.floor(colorArray.length * Math.random())];
  })
})