单击GO按钮后，如何将背景色更改为线性渐变，并在输入标签中输入颜色并进行混合？

Question

我试图将线性梯度放在dom之后，但是它根本没有帮助:(

https://codepen.io/OlegNazarov77/pen/YRjdJX

let firstColor = document.getElementById('colorOne')
let secondColor = document.getElementById('colorTwo')
document.querySelector('button').addEventListener('click',changeColor);

function changeColor(e){
  document.querySelector('body').style.background = linear-gradient(firstColor.value, secondColor.value) ; 

  preventDefault(e);
}

不好意思的代码，我只是在学习。

非常感谢！

Answer 1

我猜是因为：

 linear-gradient(firstColor.value, secondColor.value) ;

不放在'``; 尝试这个：

 document.querySelector('body').style.background = `linear-gradient(${firstColor.value}, ${secondColor.value})`;

第二件事是如果您在代码的前两行中预先分配了值。 firstColor和secondColor的值是不元素值，即产生颜色值任一字符串。 您应该使用这样的东西：

let secondColor = document.getElementById('colorTwo').val;