如何修复 DOM 背景渐变颜色

【问题标题】：How can i fix DOM baclground gradient colors如何修复 DOM 背景渐变颜色
【发布时间】：2021-05-29 11:38:46
【问题描述】：

当我将 eventListner 放入 input type = "color" 时，颜色没有改变。

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


color1.addEventListener("input", updateColor);

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

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

【问题讨论】：

更好地阐述并发布错误。

标签： javascript dom-events

【解决方案1】：

这是to right 不是to-right。我还优化了您的代码。对于color1 和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.backgroundImage = `linear-gradient(to right, ${color1.value}, ${color2.value})`;
}

<body id="gradient">
  <h3>Gradient</h3>
  <input type="color" class="color1">
  <input type="color" class="color2">
</body>

【讨论】：

@Nandakumarsingh 很高兴它成功了。如果对您有帮助，请采纳答案。