Question

我遇到以下问题：

我有一个用户输入表单，在提交时调用函数drawmycolor（）。然后，该功能会显示一个显示通过用户输入的数字生成的颜色的标签。所有这些都有效，唯一的问题是，该表不会显示在网站上，而是显示在新窗口中。我试图通过在html部分打开一个div元素然后用getElementById引用该div然后将带有innerHTML的表放入div-Element来解决这个问题。这是我的代码：

 function drawmycolor()
 {
 a = Number(document.color.d.value); //getting the user input from the form
 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); 
 var div = document.getElementById('ausgabe');  //Here I am referencing the div-el.
 div.innerHTML = div.innerHTML + "...." //here i don't know how to put in the table below.
       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
 ..

 <div id="ausgabe"><br> Blubb </div> //this is the div-element where the output is 
                                       supposed to be...

如果对此问题有任何帮助，我将不胜感激 - 非常感谢您提前！：）

Answer 1

将"..... //替换为您放入document.write

的字符串

Answer 2

每次拨打document.write("something")时，它都会用“某事”覆盖以前的内容。正如Quentin所指出的那样：

 var div = document.getElementById('ausgabe'); 



div.innerHTML="Your entire table related code here";

（如果您不想要该div的先前内容，则无需div.innerHTML=div.innerHTML+....。

或者你可以这样做（如果你想追加一个新的div）：

var dNew = document.createElement('div');
dNew.innerHTML="yolur table related content here"
document.getElementById('your outer div id here').appendChild(dNew);

如何正确使用getElementById和innerHTML（.append（））

2 个答案: