通过从HTML中获取颜色值并使用javascript添加背景颜色到表格单元格

Question

这是使用的html代码。

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

颜色值应该从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

你的代码有很多错误。试试这个：

$('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); 
    }); 
})