如何修复DOM背景渐变颜色在color类型input绑定事件监听器后不生效问题

核心错误点 #

• CSS linear-gradient 语法非法：方向参数应为空格分隔的 to right，你写的连字符格式to-right无法被浏览器识别，导致背景样式赋值失效。
• 代码冗余：color2的事件监听逻辑和updateColor完全重复，可直接复用已有函数减少冗余。

修复后完整代码 #

let css = document.querySelector("h3");
let color1 = document.querySelector(".color1");
let color2 = document.querySelector(".color2");
let body = document.getElementById("gradient");

color1.addEventListener("input", updateColor);
color2.addEventListener("input", updateColor);

function updateColor() {
    body.style.background = `linear-gradient(to right, ${color1.value}, ${color2.value})`;
}

修改完成后拖动颜色选择器，即可实时更新背景渐变效果。

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