JavaScriptのグラデーションの背景表から表

Question

私はこれで新しいもので、どこから始めるべきか分かりません。私がしたいことは、2つの色を送信するフォームを使用できるWebページを作成することです。次に、ボタンを押すと、セルの背景色が選択された2つの色のグラデーションになる表が必要です。あなたが提供できる援助は非常に高く評価されます。

<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> 

私はこれで素晴らしいことではありませんが、私はバックグラウンドとして1色で行うことができますが、デュエルカラーグラデーションが欲しいと思いました。

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>