点击按钮改变 div 背景色时瞬间恢复白色，根本原因是按钮位于 内且默认为 submit 类型，触发表单提交并刷新页面；解决方法是显式设置 type="button" 或将按钮移出表单，并优化随机色生成逻辑以确保 6 位十六进制颜色值。

点击按钮改变 div 背景色时瞬间恢复白色，根本原因是按钮位于 `

` 内且默认为 submit 类型，触发表单提交并刷新页面；解决方法是显式设置 `type="button"` 或将按钮移出表单，并优化随机色生成逻辑以确保 6 位十六进制颜色值。

问题核心在于 HTML 表单的默认行为：当 元素位于 内且未指定 type 属性时，浏览器会将其视为 type="submit"。一旦点击，表单立即提交（即使没有 action），导致整个页面刷新——所有动态样式（如 JavaScript 设置的 backgroundColor）随之丢失，div 恢复初始样式（通常为白色背景）。

✅ 正确做法是明确声明按钮类型，避免意外提交：

<button id="GETid" type="button" onclick="ChangeColor()">GET</button>

或更推荐的方式：移除内联事件，采用现代事件监听，提升可维护性与语义清晰度：

Scikit-learn

Scikit-learn是一款AI学习资源工具，Python机器学习库。

下载

<div id="GETResponse">drztu</div>
<button id="GETid">GET</button>

function ChangeColor() {
  const div = document.getElementById("GETResponse");
  // 生成严格 6 位十六进制颜色（补零确保长度）
  const randomHex = Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, "0");
  div.style.backgroundColor = `#${randomHex}`;
}

document.getElementById("GETid").addEventListener("click", ChangeColor);

? 关键优化说明：

• Math.random() * 0xffffff 等价于 * 16777215，但语义更清晰（0xffffff = 白色 #FFFFFF 的十进制）；
• .padStart(6, "0") 强制补零，避免生成如 #f3a 这类短色值（可能导致颜色异常或解析失败）；
• 使用 addEventListener 替代内联 onclick，符合现代 Web 开发最佳实践，便于解耦与测试。

⚠️ 注意事项：

• 不要遗漏 type="button" —— 即使按钮在 form 外，显式声明类型仍是良好习惯；
• 若页面含多个表单，务必检查所有按钮是否都已正确声明类型；
• 随机色算法中 Math.random() 返回 [0, 1) 区间值，乘以 0xffffff 后取整，可覆盖全部 24 位真彩色空间；
• 测试时建议在浏览器开发者工具中观察 Network 标签页，若点击后出现页面 reload 或 GET 请求，即证实了表单提交行为。

通过以上调整，按钮点击将仅执行 JS 逻辑，不再触发页面刷新，颜色变更效果即可稳定持久。