本文旨在帮助开发者解决使用 JavaScript 点击按钮动态更改网页背景颜色时，颜色仅改变一次的问题。通过将随机颜色选择逻辑置于按钮点击事件处理函数内部，确保每次点击都能生成新的颜色值，从而实现动态颜色切换的效果。文章提供详细的代码示例和解释，帮助读者理解并掌握该技巧。
在网页开发中，经常需要通过 JavaScript 动态地改变页面元素，例如背景颜色。一个常见的需求是点击按钮后，网页的背景颜色随机改变。然而，初学者可能会遇到颜色只改变一次，后续点击无效的问题。本文将深入探讨这个问题，并提供有效的解决方案。
问题分析
问题的根源在于随机颜色值的生成时机。如果随机颜色只在页面加载时生成一次，并赋值给一个变量，那么每次点击按钮时，都只是使用同一个颜色值，导致颜色无法动态改变。
解决方案
解决办法是将随机颜色值的生成逻辑放在按钮的 onclick 事件处理函数内部。这样，每次点击按钮时，都会重新生成一个随机颜色值，并将其应用到背景上。
立即学习“Java免费学习笔记（深入）”；
以下是修改后的 JavaScript 代码：
MDWechat是一款xposed插件,能够使使微信Material Design化。功能实现的功能有:1.主界面 TabLayout Material 化,支持自定义图标2.主界面 4 个页面背景修改3.全局 ActionBar 和 状态栏 颜色修改,支持主界面和聊天页面的沉浸主题(4.0新增)4.自动识别微信深色模式以调整MDwechat配色方案(3.6新增)5.主界面添加悬浮按钮(Float
let arr = ["black", "red", "silver", "gray", "white", "maroon", "red", "purple", "fuchsia", "green", "lime", "olive", "yellow", "navy", "blue", "teal", "aqua"];
document.getElementById('btn').onclick = function(e) {
// 每次点击时，重新生成随机颜色
let item = arr[Math.floor(Math.random() * arr.length)];
document.body.style.background = item;
document.getElementById('name').innerHTML = item;
e.preventDefault(); // 阻止默认行为，例如表单提交
}代码解释：
- let arr = [...]: 定义一个包含多种颜色的数组。
- document.getElementById('btn').onclick = function(e) { ... }: 为 ID 为 btn 的按钮元素绑定 onclick 事件处理函数。
- *`let item = arr[Math.floor(Math.random() arr.length)];**: 这行代码是关键。它在每次点击事件发生时，都会从arr数组中随机选择一个颜色值，并赋值给item` 变量。
- document.body.style.background = item;: 将 item 变量中存储的颜色值设置为 body 元素的背景颜色。
- document.getElementById('name').innerHTML = item;: 将颜色名称显示在 ID 为 name 的元素中。
- e.preventDefault();: 在某些情况下，按钮可能具有默认行为（例如，在表单中提交表单）。e.preventDefault() 用于阻止这些默认行为。
完整的 HTML 结构
为了方便测试，以下是完整的 HTML 结构，包含了按钮和显示颜色名称的元素：
Dynamic Background Color Change Colour name will appear here
将上述 HTML 代码保存为 index.html，并将修改后的 JavaScript 代码保存为 script.js，然后在浏览器中打开 index.html，即可看到动态改变背景颜色的效果。
总结
通过将随机颜色生成逻辑放在按钮的 onclick 事件处理函数内部，可以确保每次点击按钮时都生成新的颜色值，从而实现动态改变背景颜色的效果。 这种方法简单有效，适用于各种需要动态改变页面元素的场景。在实际开发中，可以根据具体需求，调整颜色数组和样式，实现更加丰富多彩的交互效果。
