通過從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); 
    }); 
})