无需刷新页面，如何实现背景颜色重复切换？

问题出在随机颜色只生成一次：你把item的赋值写在了点击事件外面，页面加载时就固定了这个颜色值，每次点击按钮只是重复设置同一个颜色，自然看不到变化。另外e.preventDefault()在这里毫无意义，因为你的按钮是type="button"，本来就不会触发页面跳转，删掉就行。

修正后的JavaScript代码 #

let arr = ["black", "red", "silver", "gray", "white", "maroon", "red", "purple", "fuchsia", "green", "lime", "olive", "yellow", "navy", "blue", "teal", "aqua"]

document.getElementById('btn').onclick = function() {
  // 每次点击都重新生成随机颜色
  let item = arr[Math.floor(Math.random() * arr.length)];
  document.body.style.background = item
  document.getElementById('name').innerHTML = item
}

完整代码示例 #

HTML #

<div id="name">Colour name will appear here</div>
<button id="btn" type="button">Click Me for colour change in background</button>
<script src="script.js"></script>
<script src="https://replit.com/public/js/replit-badge-v2.js" theme="dark" position="bottom-right"></script>

CSS #

html {
  height: 100%;
  width: 100%;
}

#btn {
  border: 3px solid green;
  margin: auto;
  text-align: center;
  font-size: 50px;
}

#name {
  border: 3px solid green;
  margin: auto;
  text-align: center;
  font-size: 50px;
}

这样修改后，每次点击按钮都会重新从数组里随机选一个颜色，就能实现多次点击切换背景色的效果了。

内容的提问来源于stack exchange，提问作者Abhilasha Tripathi