Javascript innerHtml不会修改容器的HTML
我在做一个项目，我遇到了一个我不理解的错误（很可能）。行document.getElementById（“字段”）.innerHtml+=和所有的_bar_holder.innerHtml+=实际上并没有向元素添加内容。元素的定义非常好（所有ID都是正确的），整个JavaScript代码都在HTML之后，在页面的最底部。从本质上讲，“字段”是一个，而所有的字段持有者都是一个。整个JS代码都可以看到。关于这件事的任何建议都是欢迎的。问题在于asd功能Javascript innerHtml不会修改容器的HTML,javascript,innerhtml,Javascript,Innerhtml,我在做一个项目，我遇到了一个我不理解的错误（很可能）。行document.getElementById（“字段”）.innerHtml+=和所有的_bar_holder.innerHtml+=实际上并没有向元素添加内容。元素的定义非常好（所有ID都是正确的），整个JavaScript代码都在HTML之后，在页面的最底部。从本质上讲，“字段”是一个，而所有的字段持有者都是一个。整个JS代码都可以看到。关于这件事的任何建议都是欢迎的。问题在于asd功能 <script> function
<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]+'"/> Second entry: <input type="textfield" id="field'+i.toString()+'2" value="'+data_values[i][1]+'"/> Third entry: <input type="textfield" id="field'+i.toString()+'3" value="'+data_values[i][2]+'"/> Fourth entry: <input type="textfield" id="field'+i.toString()+'4" value="'+data_values[i][3]+'"/> </p> <p align="center">Limiter1: <input type="textfield" id="field'+i.toString()+'_1" value="'+limit_values[i][0]+'"/> Limiter2: <input type="textfield" id="field'+i.toString()+'_2" value="'+limit_values[i][1]+'"/> 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>
函数bubbleSort（a，b）
{
var互换；
做{
交换=假；
对于（变量i=0；ia[i+1]）{
var-temp=a[i]；
var temp1=b[i]；
a[i]=a[i+1]；
a[i+1]=温度；
b[i]=b[i+1]；
b[i+1]=temp1；
交换=真；
}
}
}while（交换）；
}
功能负（b）
{
如果（b>=0）
{
var a=b；
返回a；
}
其他的
{
var a=数学abs（b）/2；
返回a；
}
}
函数asd（）
{
var num_of_数据集=1；
var bar_colors=[“灰色”、“红色”、“绿色”]；
document.getElementById（“graph_title”）.innerHTML=“过去4年的年度现金收入”；
var支架高度=600；
var支架_宽度=800；
var数据_值=[]；
var限制_值=[]；
数据_值[1]=[“250”、“160”、“200”、“80”]；
极限值[1]=[“250”、“160”、“200”、“80”]；
var text4=“一”；
var text3=“两个”；
var text2=“三”；
var text1=“四”；
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=支架高度；
document.getElementById（“第一个机器人”）.style.marginBottom=Math.abs（支架宽度-支架高度）；
document.getElementById（“图形标题”）.style.marginTop=Math.abs（支架宽度-支架高度）；
_数据集的var-width_=100/（_数据集的num_*2）；
var fields=document.getElementById（“字段”）；
所有_bars_holder.innerHtml=''；
fields.innerHtml=''；
var i=0；
if（document.getElementById（“字段”+i.toString（）+“1”））{
警报（“hie1”）；
}否则{
对于（i=1；i=0&&max\u数组）
{
var c=0；
}
其他的
{
var c=_数组的min_+_数组的min_；
}
var m=parseInt（main_holder.style.height，10）/（parseInt（数组的最大值，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]；
泡泡运动（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*（变量[2]-var4）；
如果（ffs2>（保持架高度-10））{ffs2=ffs2-（ffs2-保持架高度）-30；}
如果（ffs3>（保持架高度-10））{ffs3=ffs3-（ffs3-保持架高度）-30；}
如果（ffs4>（保持架高度-10））{ffs4=ffs4-（ffs4-保持架高度）-30；}
变量dd=（支架高度-ffs2）*（-1）；
如果（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（）+''u1'）。style.top=kp-（ffs2-ffs222）；
FirstBar.style.height=“100%”；
SecondBar.style.height=ffs2；
ThirdBar.style.height=ffs3；
第四栏样式高度=ffs4；
FirstBar1.style.height=“100%”；
SecondBar1.style.height=ffs222；
ThirdBar1.style.height=ffs333；
FourthBar1.style.height=ffs444；
document.getElementById（'text'+i.toString（）+''u4'）。innerHTML=limvars[0]；
document.getElementById（'text'+i.toString（）+''u3'）。innerHTML=limvars[1]；
document.getElementById（'text'+i.toString（）+''u2'）。innerHTML=limvars[2]；
}
}
window.onload=asd；
innerHTMLinnerHTML致以最诚挚的问候这就是我喜欢团队合作的原因！：）我总是做一些愚蠢的事，后来我看不见自己了：）谢谢你，伙计！：）非常感谢！：）验证器没有显示任何错误，但它是一个输入错误！：）