innerHtml不会修改容器的HTML

Question

我正在做一些项目，我已经遇到了我不理解的错误（最有可能）。 lines document.getElementById（＆＃34; fields＆＃34;）。innerHtml + =和all_bars_holder.innerHtml + =实际上没有向元素添加内容。元素定义非常好（所有ID都是正确的），整个JavaScript代码位于HTML之后，位于页面底部。从本质上讲，＆＃34;字段＆＃34;是一个和all_bars_holder是一个。可以看到整个JS代码。欢迎提出有关此事的任何建议。问题在asd函数中。

<script>
function bubbleSort(a, b) 
{
    var swapped;
    do {
        swapped = false;
        for (var i=0; i < a.length-1; i++) {
            if (a[i] > a[i+1]) {
                var temp = a[i];
            var temp1 = b[i];
                a[i] = a[i+1];
                a[i+1] = temp;
                b[i] = b[i+1];
                b[i+1] = temp1;
                swapped = true;
            }
        }
    } while (swapped);
}


function neg(b)
{
if (b>=0)
{
var a= b;
return a;
}
else
{
var a= Math.abs(b)/2;
return a;
}
}


function asd() 
{

var num_of_datasets = 1; 
var bar_colors = ['gray','red','green']; 
document.getElementById("graph_title").innerHTML = "<b>Yearly look on money income for last 4 years</b>"; 
var holder_height = 600; 
var holder_width = 800; 
var data_values = [];
var limit_values = [];
data_values[1] = ["250", "160", "200", "80"];
limit_values[1] = ["250", "160", "200", "80"];
var text4 = "one"; 
var text3 = "two"; 
var text2 = "three"; 
var text1 = "four"; 




var main_holder = document.getElementById("main_holder_chart"); 
var all_bars_holder = document.getElementById("all_bars_holder");
main_holder.style.width = holder_width; 
main_holder.style.height = holder_height;
document.getElementById("first_bot").style.marginBottom = Math.abs(holder_width - holder_height); 
document.getElementById("graph_title").style.marginTop = Math.abs(holder_width - holder_height);
var width_of_dataset = 100/(num_of_datasets*2);
var fields = document.getElementById("fields");
all_bars_holder.innerHtml = '';
fields.innerHtml = '';

var i = 0;

if(document.getElementById("field"+i.toString()+"1")){
alert("hie1");


} else {

for(i=1; i<num_of_datasets+1; i++)
{



document.getElementById("fields").innerHtml +='<p align="center">First entry: <input type="textfield" id="field'+i.toString()+'1" value="'+data_values[i][0]+'"/>&nbsp;&nbsp;&nbsp;Second entry: <input type="textfield" id="field'+i.toString()+'2" value="'+data_values[i][1]+'"/>&nbsp;&nbsp;&nbsp;Third entry: <input type="textfield" id="field'+i.toString()+'3" value="'+data_values[i][2]+'"/>&nbsp;&nbsp;&nbsp;Fourth entry: <input type="textfield" id="field'+i.toString()+'4" value="'+data_values[i][3]+'"/>&nbsp;&nbsp;&nbsp;</p> <p align="center">Limiter1: <input type="textfield" id="field'+i.toString()+'_1" value="'+limit_values[i][0]+'"/>&nbsp;&nbsp;&nbsp;Limiter2: <input type="textfield" id="field'+i.toString()+'_2" value="'+limit_values[i][1]+'"/>&nbsp;&nbsp;&nbsp;Limiter3: <input type="textfield" id="field'+i.toString()+'_3" value="'+limit_values[i][2]+'"/></p><hr>';
alert("hie");
}
}





for (i=1; i<num_of_datasets+1; i++)
{

all_bars_holder.innerHtml += '<td style="width: '+width_of_dataset.toString()+'%; padding:0;"><table cellspacing="0" cellpadding="0" id="one_dat_chart'+i.toString()+'" align="right" style="width: 20%; height: 80%; text-align: center;"><tr><td style="vertical-align:top"><p id="text'+i.toString()+'1" style="vertical-align: top;"></p></td></tr><tr><td style="vertical-align:bottom;"><div id="flashback'+i.toString()+'" style="position:relative; top:0px; width:100%; max-width:100%; background-color:black; text-align:right; line-height:20px; font-size: 12px; color:white;">Lorem</div><table cellspacing="0" id="two_dat_chart'+i.toString()+'" cellpadding="0" align="center" style="width: 100%; height: 80%; background-color: green; text-align: center;"><tr><td style="vertical-align:top"><p id="text'+i.toString()+'2" style="vertical-align: top;"></p></td></tr><tr><td style="vertical-align:bottom;"><table cellspacing="0" cellpadding="0" id="three_dat_chart'+i.toString()+'" align="center" style="width: 100%; height: 80%; background-color: pink; text-align: center;"><tr><td style="vertical-align:top"><p id="text'+i.toString()+'3" style="vertical-align: top;"></p></td></tr><tr><td style="vertical-align:bottom;"><table cellspacing="0" cellpadding="0" id="four_dat_chart'+i.toString()+'" align="center" style="width: 100%; height: 80%; background-color: brown; text-align: center;"><tr><td style="vertical-align:top"><p id="text'+i.toString()+'4" style="vertical-align: top;"></p></td></tr><tr><td style="vertical-align:bottom;"><p></p></td></tr></table></td></tr></table></td></tr></table></td></tr></table></td><td style="width:25%; padding:0;"><table cellspacing="0" cellpadding="0" id="one_dat_chart'+i.toString()+'_1" align="left" style=" width: 20%; height: 80%; text-align: center;"><tr><td style="vertical-align:top"><p id="text'+i.toString()+'_1" style="vertical-align: top;"></p></td></tr><tr><td style="vertical-align:bottom;"><div id="flashback'+i.toString()+'_1" style="position:relative; top:0px; width:100%; max-width:100%; background-color:black; line-height:20px; font-size: 12px; color:black;">lorem</div><table cellspacing="0" id="two_dat_chart'+i.toString()+'_1" cellpadding="0" align="center" style=" width: 100%; height: 80%; background-color: green; text-align: center;"><tr><td style="vertical-align:top"><p id="text'+i.toString()+'_2" style="vertical-align: top;"></p></td></tr><tr><td style="vertical-align:bottom;"><table cellspacing="0" cellpadding="0" id="three_dat_chart'+i.toString()+'_1" align="center" style=" width: 100%; height: 80%; background-color: pink; text-align: center;"><tr><td style="vertical-align:top"><p id="text'+i.toString()+'_3" style="vertical-align: top;"></p></td></tr><tr><td style="vertical-align:bottom;"><table cellspacing="0" cellpadding="0" id="four_dat_chart'+i.toString()+'_1" align="center" style=" width: 100%; height: 80%; background-color: brown; text-align: center;"><tr><td style="vertical-align:top"><p id="text'+i.toString()+'_4" style="vertical-align: top;">asd</p></td></tr><tr><td style="vertical-align:bottom;"><p></p></td></tr></table></td></tr></table></td></tr></table></td></tr></table></td>';




var FirstBar = document.getElementById("one_dat_chart"+i.toString()+"");
var SecondBar = document.getElementById("two_dat_chart"+i.toString()+"");
var ThirdBar = document.getElementById("three_dat_chart"+i.toString()+"");
var FourthBar = document.getElementById("four_dat_chart"+i.toString()+"");

var FirstBar1 = document.getElementById("one_dat_chart"+i.toString()+"_1");
var SecondBar1 = document.getElementById("two_dat_chart"+i.toString()+"_1");
var ThirdBar1 = document.getElementById("three_dat_chart"+i.toString()+"_1");
var FourthBar1 = document.getElementById("four_dat_chart"+i.toString()+"_1");



SecondBar.style.background = bar_colors[0];
ThirdBar.style.background = bar_colors[1]; 
FourthBar.style.background = bar_colors[2]; 









var var4 = Number(document.getElementById("field"+i.toString()+"4").value); 
var var3 = Number(document.getElementById("field"+i.toString()+"3").value);
var var2 = Number(document.getElementById("field"+i.toString()+"2").value); 
var var1 = Number(document.getElementById("field"+i.toString()+"1").value);


var var11 = Number(document.getElementById("field"+i.toString()+"_1").value); 
var var22 = Number(document.getElementById("field"+i.toString()+"_2").value);
var var33 = Number(document.getElementById("field"+i.toString()+"_3").value);





var text11 = ""; 
var text22 = "";
var text33 = "";

var vars1 = [var4, var3, var2, var1]; 
var max_of_array = Math.max.apply(Math, vars1); 
var min_of_array = Math.min.apply(Math, vars1); 
var vars = [var3, var2, var1]; 
var varss = [var3, var2, var1]; 
var limvars = [var33, var22, var11]; 
var texts = [text3, text2, text1]; 

bubbleSort(vars, texts); 
bubbleSort(varss, limvars); 


var colors = [FourthBar.style.backgroundColor, ThirdBar.style.backgroundColor,SecondBar.style.backgroundColor]; 
bubbleSort(vars, colors);
document.getElementById('legend').innerHTML = "<p style='font-size:24px;'>Legend</p><table style='width: "+holder_height/4+";  border: 4px solid black'><tr><td style='background-color:black; color: white;'></td><td>"+text4+"</td></tr><tr><td style='background-color:"+colors[2]+";'></td><td>"+texts[2]+"</td></tr><tr><td style='background-color:"+colors[1]+";'></td><td>"+texts[1]+"</td></tr><tr><td style='background-color:"+colors[0]+";'></td><td>"+texts[0]+"</td></tr></table>"; //Printing the legend;

FirstBar.style.height = 1; 
SecondBar.style.height= 1;
ThirdBar.style.height= 1;
FourthBar.style.height = 1;




document.getElementById('text'+i.toString()+'2').innerHTML = vars[2]; 
document.getElementById('text'+i.toString()+'4').innerHTML = vars[0];
document.getElementById('text'+i.toString()+'3').innerHTML = vars[1];




if (parseInt(min_of_array, 10)>=0 && max_of_array)
{
var c=0; 
}
else
{
var c = min_of_array + min_of_array;
}






var m = parseInt(main_holder.style.height, 10)/(parseInt(max_of_array, 10)-parseInt(c, 10));
document.getElementById('point_value').innerHTML = m;



var ffs2 = m * neg(vars[2]); 
var ffs4 = m * neg(vars[0]);
var ffs3 = m * neg(vars[1]);







var cl1 = [FourthBar.style.background, ThirdBar.style.background,  SecondBar.style.background]; 
bubbleSort(limvars, cl1); 



var ffs222 = m * neg(limvars[2]); 
var ffs333 = m * neg(limvars[1]);
var ffs444 = m * neg(limvars[0]);




SecondBar1.style.background = cl1[2]; 
ThirdBar1.style.background = cl1[1]; 
FourthBar1.style.background = cl1[0]; 





var kp = m*(vars[2] - var4); 





if (ffs2>(holder_height-10)){ffs2 = ffs2 - (ffs2-holder_height) - 30;} 
if (ffs3>(holder_height-10)){ffs3 = ffs3 - (ffs3-holder_height) - 30;}
if (ffs4>(holder_height-10)){ffs4 = ffs4 - (ffs4-holder_height) - 30;}
var dd = (holder_height - ffs2)*(-1); 
if (kp<dd){
kp = (holder_height - ffs2)*(-1);
}
if (kp>=ffs2) {kp=kp - (kp-ffs2);}







document.getElementById('flashback'+i.toString()+'').style.top = kp; 
document.getElementById('flashback'+i.toString()+'').innerHTML = var4;
document.getElementById('flashback'+i.toString()+'_1').style.top = kp - (ffs2 - ffs222); 







FirstBar.style.height="100%"; 
SecondBar.style.height=ffs2;
ThirdBar.style.height=ffs3;
FourthBar.style.height=ffs4;

FirstBar1.style.height="100%"; 
SecondBar1.style.height=ffs222;
ThirdBar1.style.height=ffs333;
FourthBar1.style.height=ffs444;



document.getElementById('text'+i.toString()+'_4').innerHTML = limvars[0]; 
document.getElementById('text'+i.toString()+'_3').innerHTML = limvars[1];
document.getElementById('text'+i.toString()+'_2').innerHTML = limvars[2];




}
}





window.onload = asd;


</script>

Answer 1

必须是innerHTML，而不是innerHtml。

Answer 2

您可以查看以下链接以了解innerHTML的使用情况。大概可能是你错了。

http://www.w3schools.com/jsref/prop_html_innerhtml.asp

您还可以使用以下网站的在线验证工具验证您的javascript。

http://www.javascriptlint.com/online_lint.php

最好的问候