htmlのカラー値を取得し、javascriptを使用して表のセルに背景色を追加するには

Question

これは使用されるHTMLコードです。

色の値はHTMLから取得する必要があり、JavaScriptを使用して表のセルに色を適用する必要があります。これはjavascriptコードです。

let color_value = document.getElementById("colorPicker").value; 
$('document').on('ready',function(){ 
    $('td').click(function(){ 
    let colour = $('#colorPicker'); 
    $(this).css("td.background-color","color_value"); 
    }); 
}) 

ただし、セルをクリックしたときに表のセルに色が追加されません。これを解決するには？

Answer 1

あなたのコードには多くの間違いがあります。代わりに、 ` "color_value"`（前者は変数であり、後者は単に文字列である）の

$('td').click(function(){ 
 
    $(this).css("background-color", $("#colorPicker").val()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<h2>Pick A Color</h2> 
 
<input type="color" id="colorPicker"> 
 
<table> 
 
    <td>text</td> 
 
</table>

Answer 2

$('document').on('ready',function(){ 
    //let color_value = document.getElementById("colorPicker").value; 
    $('td').click(function(){ 
    let colour = $('#colorPicker'); 
    let color_value = colour.val(); 
    $(this).css("td.background-color",color_value); 
    }); 
})