I need to apply the div_color_click on the table i.e table1
<pre><code>&lt;style type="text/css"&gt;
&lt;!--
.border-rb {
cursor:pointer;
height:15px;
width:15px;
border-right: solid black 1px;
border-bottom: solid black 1px;
font-size:1px;
}
.border-lt {
border-top: 1px solid #000;
border-left: 1px solid #000;
}
.border-t {
border-top: 1px solid #000;
border-left: 1px none #000;
}
.div_color_preview {
background-color: #FFFFFF;
width: 50px;
height: 50px;
border: 1px solid #000;
}
.div_color_click {
background-color: #FFFFFF;
width: 50px;
height: 50px;
border: 1px solid #000;
}
--&gt;
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;table name="table1"&gt;&lt;tr&gt;
&lt;td&gt;&lt;%out.println(request.getAttribute("nam")); %&gt;
&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;input name="txtColor" type="text" id="txtColor" size="7"&gt;
&lt;br&gt;
&lt;br&gt;
&lt;div id="div_color_text"&gt;Hex code&lt;/div&gt;
&lt;br&gt;
&lt;div id="div_color_preview" class="div_color_preview"&gt;&lt;/div&gt;
&lt;br&gt;
&lt;div id="div_color_click" class="div_color_click"&gt;&lt;/div&gt;
&lt;br&gt;
&lt;script type="text/javascript" language="javascript"&gt;
&lt;!--
function col_preview(c) {
document.getElementById('div_color_preview').style.cssText='background-color: ' + c +';     width: 50px; 
height: 50px;  
border: 1px solid #000;';
document.getElementById('div_color_text').innerHTML  = c;
}
function col_exit(c) {
document.getElementById('div_color_preview').style.cssText = 'background-color:#FFFFFF;     width:        50px; 
height: 50px; 
border: 1px solid #000;';
document.getElementById('div_color_text').innerHTML  = "Hex code";
}
function col_click(c) {
document.getElementById('div_color_click').style.cssText = document.getElementById('div_color_preview').style.cssText;
document.getElementById('txtColor').value = c;
}

document.write('&lt;table width="170" border="0" cellpadding="0" cellspacing="0"      style="background-color:black;" &gt;&lt;tr&gt;&lt;td width="90"&gt;&lt;table border="0" cellpadding="0"      cellspacing="0" class="border-lt" &gt;');
var int_count_col1 = 6;
var int_count_col2 = 6;
var int_count = 0;
while (int_count != 36)
{
int_count = int_count + 1
if (int_count_col1 == 1) {str_count_col1 = "00"}
if (int_count_col1 == 2) {str_count_col1 = "33"}
if (int_count_col1 == 3) {str_count_col1 = "66"}
if (int_count_col1 == 4) {str_count_col1 = "99"}
if (int_count_col1 == 5) {str_count_col1 = "CC"}
if (int_count_col1 == 6) {str_count_col1 = "FF"}
if (int_count_col2 == 1) {str_count_col2 = "00"}
if (int_count_col2 == 2) {str_count_col2 = "33"}
if (int_count_col2 == 3) {str_count_col2 = "66"}
if (int_count_col2 == 4) {str_count_col2 = "99"}
if (int_count_col2 == 5) {str_count_col2 = "CC"}
if (int_count_col2 == 6) {str_count_col2 = "FF"}
document.write('&lt;tr&gt;&lt;td onMouseOver="col_preview(\'#FF' + str_count_col1 +   str_count_col2 + '\');" onClick="col_click(\'#FF' + str_count_col1 + str_count_col2 +   '\');" onMouseOut="col_exit();" bgcolor="#FF' + str_count_col1 + str_count_col2 + '"    class="border-rb"&gt;&amp;nbsp;&lt;/td&gt;' +
'&lt;td onMouseOver="col_preview(\'#CC' + str_count_col1 + str_count_col2 + '\');"   onClick="col_click(\'#CC' + str_count_col1 + str_count_col2 + '\');"   onMouseOut="col_exit();" bgcolor="#CC' + str_count_col1 + str_count_col2 + '"   class="border-rb"&gt;&amp;nbsp;&lt;/td&gt;' +
'&lt;td onMouseOver="col_preview(\'#99' + str_count_col1 + str_count_col2 + '\');"     onClick="col_click(\'#99' + str_count_col1 + str_count_col2 + '\');"     onMouseOut="col_exit();" bgcolor="#99' + str_count_col1 + str_count_col2 + '"     class="border-rb"&gt;&amp;nbsp;&lt;/td&gt;' +
'&lt;td onMouseOver="col_preview(\'#66' + str_count_col1 + str_count_col2 + '\');"     onClick="col_click(\'#66' + str_count_col1 + str_count_col2 + '\');"     onMouseOut="col_exit();" bgcolor="#66' + str_count_col1 + str_count_col2 + '"     class="border-rb"&gt;&amp;nbsp;&lt;/td&gt;' +
'&lt;td onMouseOver="col_preview(\'#33' + str_count_col1 + str_count_col2 + '\');" onClick="col_click(\'#33' + str_count_col1 + str_count_col2 + '\');" onMouseOut="col_exit();" bgcolor="#33' + str_count_col1 + str_count_col2 + '" class="border-rb"&gt;&amp;nbsp;&lt;/td&gt;' +
'&lt;td onMouseOver="col_preview(\'#00' + str_count_col1 + str_count_col2 + '\');" onClick="col_click(\'#00' + str_count_col1 + str_count_col2 + '\');" onMouseOut="col_exit();" bgcolor="#00' + str_count_col1 + str_count_col2 + '" class="border-rb"&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;');
if (int_count_col2 == 1){int_count_col1 = int_count_col1 - 1;int_count_col2 = 6;
}else{int_count_col2 = int_count_col2 - 1}
if (int_count == 18) {document.write('&lt;/table&gt;&lt;/td&gt;&lt;td width="90"&gt;&lt;table width="0%"     border="0" cellpadding="0" cellspacing="0" class="border-t"&gt;');}
if (int_count == 36) {document.write('&lt;/table&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;');}
}
--&gt;
&lt;/script&gt;
&lt;button name="submit" value="submit" type="submit" onclick="return checkbutton();"&gt;
</code></pre>

<p>I used the above code for making a color picker and now I need to apply color to a text coming from the text box that is stored in a variable in table1</p>

<p>I need to apply the <code>div_color_click</code> on the table i.e table1</p>

<p>I used the following function to apply the color but it is not working</p>

<pre><code>&lt;script&gt;
function checkbutton()
{
var color=document.getElementById("textcolor").value;
document.getElementById("table1").style.color=document.getElementById("textcolor").innerHTML;
document.getElementsByName("nam").style.color=document.getElementById("textcolor").innerHTML;
}
&lt;/script&gt;
</code></pre>
