生成随机渐变背景未生效，请求排查：函数或addEventListener问题？

你的代码里有两个关键问题导致功能失效，和addEventListener绑定无关，是函数逻辑的问题：

1. 模板字符串语法错误 #

设置背景样式时，你用了单引号包裹字符串，但要解析${color1}这种变量插值，必须用**反引号（）**来定义模板字符串。原代码里的'linear-gradient(to left top, #${color1}, #${color2})'`会被浏览器当成纯文本，变量根本没被替换，自然无法生成正确的渐变。

2. 随机颜色可能不合法 #

getRandomColor函数生成的十六进制字符串可能不足6位，比如当随机数比较小时，转16进制会得到abc这种3位的结果，而CSS要求十六进制颜色如果是6位格式就必须凑满6位，不足的话浏览器会识别为无效颜色，导致渐变不生效。

修正后的代码： #

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

// 生成6位合法十六进制颜色，不足补0
const getRandomColor = () => {
  const color = Math.floor(Math.random() * 0xffffff).toString(16);
  // 用padStart补全到6位，确保颜色合法
  return color.padStart(6, '0');
};

const generateGradient = () => {
  const color1 = getRandomColor();
  const color2 = getRandomColor();
  // 改用反引号定义模板字符串，解析变量
  document.body.style.background = `linear-gradient(to left top, #${color1}, #${color2})`;
};

generateGradient();
button.addEventListener("click", generateGradient);

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