javascript - 你如何通过用户输入javascript html设置对象的颜色

Question

我有以下形式供用户输入三个值，然后我将其转换为十六进制(执行转换的函数我没有发布，因为它不是问题的一部分 - 如果你想看到它，让我知道。)

<form name="color">
  Red: <input type="number" name="d"> <br>
  Green: <input type="text" name="e"> <br>
  Blue: <input type="text" name="f"> <br>
  <input type="button" value="Paint" onclick="javascript:drawmycolor();">
</form>

然后我想将下表第三行的背景色设置为用户输入生成的颜色。为此，我编写了以下函数:

 function drawmycolor()
 {
 a = Number(document.color.d.value);
 b = Number(document.color.e.value);
 c = Number(document.color.f.value);

 if (a >= 0 && a < 255 && Math.floor(a) == a &&
     b >= 0 && b < 255 && Math.floor(b) == b &&
     c >= 0 && c < 255 && Math.floor(c) == c)
 {
   mycolor = "#" + getHexadecimalValue(a) +
    ""  + getHexadecimalValue(b) +
    ""  + getHexadecimalValue(c); 

   document.write('<br><table border="1" cellspacing="1"cellpadding="1">');
   document.write('<tr><th>Hexadecimal Red</th><th>' +
   'Hexadecimal Green</th><th>' +
   'Hexadecimal Blue</th><th>' +
   'Color</th></tr>');
   document.write('<tr><td>' + getHexadecimalValue(a) + '</td><td>' + 
   getHexadecimalValue(b) + '</td><td>' + 
   getHexadecimalValue(c) +                            
   '</td><td bgcolor="mycolor"</td></tr>'); //RIGHT HERE I WANT TO SET THE COLOR
   document.write('</table>');
 }
 else
 ..

我知道函数中的所有内容都有效:它以正确的方式将字符串“mycolor”放在一起，并且还按我想要的方式打印表格。如果我输入像“#F0F8FF”这样的正常值，如果还显示最后一行的背景颜色。现在唯一不起作用的是将背景颜色连接到通过用户输入生成的“mycolor”...

我很感激任何帮助!谢谢你，伊娃

Answer 1

您应该关闭 <td>适本地

<td bgcolor="mycolor"></td>

代替

<td bgcolor="mycolor"</td>

然后，你可以设置<td>的背景颜色像这样编程

document.querySelector('[bgcolor="mycolor"]').style.backgroundColor = mycolor;

例子-> http://jsfiddle.net/wvQJB/

或直接在您写入页面的代码中:

...
getHexadecimalValue(c) +                            
'</td><td style="background-color: '+mycolor+';"></td></tr>'); 
document.write('</table>');

注意 bgcolor已弃用!参见 -> https://developer.mozilla.org/en-US/docs/Fixing_common_validation_problems#The.C2.A0bgcolor_attribute_is_deprecated