我在编写关于预算计算器的代码时，同时观察我的专业人员对此练习的解决方案，而我的几乎相同的是没有运行。虽然我填写表格，但当我开始使用DOM更新我的表单元素时，我会得到下一个错误：
Google Chrome中的我收到错误：未捕获的TypeError：无法读取属性'style'的null 在Firefox中：TypeError：document.getElementById（...）为null
当我打开页面时，正文调用函数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:someone@gmail.com?Subject=Comments about budget calculator";'>Comments</button>
<button onclick="alert('blah blah blah');">About</button>
</td>
</tr>
</table>
</fieldset>
</form>
</body>
答案 0 :(得分：0)
我怀疑这会导致问题：
if (Accounts[i]=null)
Accounts[i]='Account #'+i;
如果您想检查Accounts[i]是否为null，请使用==（通常您需要在javascript中使用===）。您现在正在做的是将null分配给Accounts[i]。
答案 1 :(得分：0)
您使用了=，比较时应该使用==或===。 =表示您为account [i]指定null。
答案 2 :(得分：0)
您的循环以i = 0开头，但在您的html元素中以1开头，例如r1。
当然，您可能还有其他一些错误（例如=已提到的问题，而不是===），但您的代码并不完整，因此很难跟踪它们。