0
我写这段关于预算计算器的代码，同时观察我的proffessor对于这个练习的解决方案，而我的差不多没有运行。虽然我填表，当我开始更新我的表单元素使用DOM时，我得到下面的错误：TypeError：document.getElementById（...）为null不会停止出现
谷歌浏览器我得到的错误：未捕获TypeError：无法在Firefox中读取属性'样式'空 ：TypeError： document.getElementById（...）为null
当我打开页面时，body调用函数formInit（）。
var Accounts= new Array("blah", "blah1");
var MoneySpent= new Array();
var Rates= new Array();
var bud=1000;
var rem;
var maxrate=100;
var i;
function initArrays(){
for (i=0; i< 20; i++){
if (Accounts[i]=null)
Accounts[i]='Account #'+i;
MoneySpent[i]=0;
Rates[i]=0;
rem=1000;
}
}
function updateFormElements(){
for (i=0; i<20; i++){
document.getElementById("r"+i).style.background='#bbb';
document.getElementById("a"+i).value=Accounts[i];
document.getElementById("m"+i).value=MoneySpent[i];
document.getElementById("r"+i).value=Rates[i];
}
document.getElementById("budgettarget").value=budget;
document.getElementById("remaining").value=rem;
if(rem<0)
document.getElementById("remaining").style.background='red';
}
function formInit(){
initArrays();
updateFormElements();
}
我的.js包含更多的功能和它包含在头部的脚本的一部分，但我需要通过这个阶段，检查休息，我HTLM代码是下一个：
<body onload="formInit();"><br />
<form id="budForm" action="">
<fieldset>
<legend> Budget Calculator </legend>
<table >
<tr>
<th colspan="6"> Red indicators over budget | Grey indicators read only zone! </th>
</tr>
<tr>
<th colspan="6"> Budget Target (€): <input id="budgettarget" type="text" class="boxmed"/>
Remaining (€): <input id="remaining" type="text" class="boxmed" readonly/>
</th>
</tr>
<tr>
<td>
<ul class="nodec">
<li><input id="a1" type="text" class="boxlg" value="AccountName"/></li>
<li><input id="a2" type="text" class="boxlg" value="AccountName"/></li>
<li><input id="a3" type="text" class="boxlg" value="AccountName"/></li>
<li><input id="a4" type="text" class="boxlg" value="AccountName"/></li>
<li><input id="a5" type="text" class="boxlg" value="AccountName"/></li>
<li><input id="a6" type="text" class="boxlg" value="AccountName"/></li>
<li><input id="a7" type="text" class="boxlg" value="AccountName"/></li>
<li><input id="a8" type="text" class="boxlg" value="AccountName"/></li>
<li><input id="a9" type="text" class="boxlg" value="AccountName"/></li>
<li><input id="a10" type="text" class="boxlg" value="AccountName"/></li>
</ul>
</td>
<td>
<ul class="nodec">
<li>€<input id="m1" type="text" class="boxmed"/></li>
<li>€<input id="m2" type="text" class="boxmed"/></li>
<li>€<input id="m3" type="text" class="boxmed"/></li>
<li>€<input id="m4" type="text" class="boxmed"/></li>
<li>€<input id="m5" type="text" class="boxmed"/></li>
<li>€<input id="m6" type="text" class="boxmed"/></li>
<li>€<input id="m7" type="text" class="boxmed"/></li>
<li>€<input id="m8" type="text" class="boxmed"/></li>
<li>€<input id="m9" type="text" class="boxmed"/></li>
<li>€<input id="m10" type="text" class="boxmed"/></li>
</ul>
</td>
<td>
<ul class="nodec">
<li><input id="r1" type="text" class="boxsm" readonly/>%</li>
<li><input id="r2" type="text" class="boxsm" readonly/>%</li>
<li><input id="r3" type="text" class="boxsm" readonly/>%</li>
<li><input id="r4" type="text" class="boxsm" readonly/>%</li>
<li><input id="r5" type="text" class="boxsm" readonly/>%</li>
<li><input id="r6" type="text" class="boxsm" readonly/>%</li>
<li><input id="r7" type="text" class="boxsm" readonly/>%</li>
<li><input id="r8" type="text" class="boxsm" readonly/>%</li>
<li><input id="r9" type="text" class="boxsm" readonly/>%</li>
<li><input id="r10" type="text" class="boxsm" readonly/>%</li>
</ul>
</td>
<td>
<ul class="nodec">
<li><input id="a11" type="text" class="boxlg" value="AccountName"/></li>
<li><input id="a12" type="text" class="boxlg" value="AccountName"/></li>
<li><input id="a13" type="text" class="boxlg" value="AccountName"/></li>
<li><input id="a14" type="text" class="boxlg" value="AccountName"/></li>
<li><input id="a15" type="text" class="boxlg" value="AccountName"/></li>
<li><input id="a16" type="text" class="boxlg" value="AccountName"/></li>
<li><input id="a17" type="text" class="boxlg" value="AccountName"/></li>
<li><input id="a18" type="text" class="boxlg" value="AccountName"/></li>
<li><input id="a19" type="text" class="boxlg" value="AccountName"/></li>
<li><input id="a20" type="text" class="boxlg" value="AccountName"/></li>
</ul>
</td>
<td>
<ul class="nodec">
<li>€<input id="m11" type="text" class="boxmed"/></li>
<li>€<input id="m12" type="text" class="boxmed"/></li>
<li>€<input id="m13" type="text" class="boxmed"/></li>
<li>€<input id="m14" type="text" class="boxmed"/></li>
<li>€<input id="m15" type="text" class="boxmed"/></li>
<li>€<input id="m16" type="text" class="boxmed"/></li>
<li>€<input id="m17" type="text" class="boxmed"/></li>
<li>€<input id="m18" type="text" class="boxmed"/></li>
<li>€<input id="m19" type="text" class="boxmed"/></li>
<li>€<input id="m20" type="text" class="boxmed"/></li>
</ul>
</td>
<td>
<ul class="nodec">
<li><input id="r11" type="text" class="boxsm" readonly/>%</li>
<li><input id="r12" type="text" class="boxsm" readonly/>%</li>
<li><input id="r13" type="text" class="boxsm" readonly/>%</li>
<li><input id="r14" type="text" class="boxsm" readonly/>%</li>
<li><input id="r15" type="text" class="boxsm" readonly/>%</li>
<li><input id="r16" type="text" class="boxsm" readonly/>%</li>
<li><input id="r17" type="text" class="boxsm" readonly/>%</li>
<li><input id="r18" type="text" class="boxsm" readonly/>%</li>
<li><input id="r19" type="text" class="boxsm" readonly/>%</li>
<li><input id="r20" type="text" class="boxsm" readonly/>%</li>
</ul>
</td>
</tr>
<tr>
<td class="just" colspan="4">
<button onclick="Calc(); BudFocus();">Calculate</button>
<button onclick="formInit(); BudFocus)(;">Clear Form</button>
<button onclick='window.location.href="mailto:[email protected]?Subject=Comments about budget calculator";'>Comments</button>
<button onclick="alert('blah blah blah');">About</button>
</td>
</tr>
</table>
</fieldset>
</form>
</body>
请尝试以下循环document.getElementById（“'”+“r”+ i +“'”） – 2014-08-30 12:38:17
没有结果... idk还有什么其他的尝试：/ – natan 2014-08-30 14:09:57
@natan你可以发布你的html吗？另外，尝试将HTML放置在HTML – Yogesh 2014-08-30 14:14:41