Javascript渐变背景表格到表格

Question

我在这方面有点新手，真的不知道从哪里开始。我想做的是创建一个网页，您可以在其中使用表单提交两种颜色。然后我想要一个表格，当您按下按钮时，单元格的背景颜色将变为所选的两种颜色的渐变。如果您能提供任何帮助，我们将不胜感激。

<script>
function updateColor(){
    var col1 = document.getElementById('color1').value;
    var col2 = document.getElementById('color2').value;
    var myCell = document.getElementById('mycell');     
        myCell.style.background = "linear-gradient(to right," + col1 + "," col2 + ");";            
}
</script>

<select id="color1">
<option value="0">set background color    
<option value="red">red
<option value="yellow">yellow
<option value="blue">blue
<option value="green">green
<option value="black">black
</select><br />

<select id="color2">
<option value="0">set background color    
<option value="red">red
<option value="yellow">yellow
<option value="blue">blue
<option value="green">green
<option value="black">black
</select>

<button onclick="updatecolor();">Gradient</button>

<table border="1">
<tr>
    <td>One
    </td>
    <td>Two
    </td>
    <td id="mycell">Three
    </td>
    <td>Four
    </td>
</tr>
</table>

我不擅长这个，我知道可以用一种颜色作为背景，但我想要一个双色渐变。

Answer 1

你只是有一些小错别字，这应该可以解决它：

function updateColor(){
    var col1 = document.getElementById('color1').value;
    var col2 = document.getElementById('color2').value;
    var myCell = document.getElementById('mycell');
    mycell.style.background = "linear-gradient(to right, " + col1 + ", " + col2 + ")";
}

<select id="color1">
<option value="0">set background color
<option value="red">red
<option value="yellow">yellow
<option value="blue">blue
<option value="green">green
<option value="black">black
</select><br />

<select id="color2">
<option value="0">set background color
<option value="red">red
<option value="yellow">yellow
<option value="blue">blue
<option value="green">green
<option value="black">black
</select>

<button onclick="updateColor();">Gradient</button>

<table border="1">
<tr>
    <td>One
    </td>
    <td>Two
    </td>
    <td id="mycell">Three
    </td>
    <td>Four
    </td>
</tr>
</table>