有 2 个相似的页面，显示具有不同数据的表，在 HTML 中我调用每个特定的函数来输出数据。每个表都有自己的 id，以及 JS 上的特定功能，如下所示。其中一页很好地显示了数据表，但另一页没有。
浏览器控制台显示：未捕获的类型错误：无法将属性"innerHTML"设置为 null 至少忠诚 (senate_attendance.js：106) 在 senate_attendance.js：108
我该如何解决这个问题？
.JS：
//FIRST HTML TABLE 1
function leastLoyal(){
function loyalPartySort(a,b) {
if (a.votes_with_party_pct < b.votes_with_party_pct)
return -1;
if (a.votes_with_party_pct > b.votes_with_party_pct)
return 1;
return 0;
}
newArr.sort(loyalPartySort);
var datos3="<tr><th>" + headersSenateLoyalty.Name + "</th><th>"+ headersSenateLoyalty. NumRepsAtt + "</th><th>" + headersSenateLoyalty.PctParty+ "</th><th>";
for(var i=0; i<10; i++){
datos3+="<tr><td><a target='_blank' href=" + newArr[i].nameLink + ">"+ newArr[i].fullName + "</a></td><td>" + newArr[i].votParty
+ "</td><td>" + newArr[i].votes_with_party_pct + "</td>";
}
document.getElementById("senateLeast").innerHTML=datos3;
}
leastLoyal()
//FIRST HTML TABLE 2
function mostLoyal(){
function loyalPartySort(a,b) {
if (a.votes_with_party_pct > b.votes_with_party_pct)
return -1;
if (a.votes_with_party_pct < b.votes_with_party_pct)
return 1;
return 0;
}
newArr.sort(loyalPartySort);
var datos4="<tr><th>" + headersSenateLoyalty.Name + "</th><th>"+ headersSenateLoyalty. NumRepsAtt + "</th><th>" + headersSenateLoyalty.PctParty+ "</th><th>";
for(var i=0; i<10; i++){
datos4+="<tr><td><a target='_blank' href=" + newArr[i].nameLink + ">"+ newArr[i].fullName + "</a></td><td>" + newArr[i].votParty
+ "</td><td>" + newArr[i].votes_with_party_pct + "</td>";
}
document.getElementById("senateMost").innerHTML=datos4;
}
mostLoyal()
//SECOND HTML TABLE 1
function leastEnga(){
function attPartySort(a,b) {
if (a.missed_votes_pct < b.missed_votes_pct)
return -1;
if (a.missed_votes_pct > b.missed_votes_pct)
return 1;
return 0;
}
newArr.sort(attPartySort);
var datos5="<tr><th>" + headersSenateAtt.Name + "</th><th>"+ headersSenateAtt.NumMissVot + "</th><th>" + headersSenateAtt.PctMiss+ "</th><th>";
for(var i=0; i<10; i++){
datos5+="<tr><td><a target='_blank' href=" + newArr[i].nameLink + ">"+ newArr[i].fullName + "</a></td><td>" + newArr[i].missVot
+ "</td><td>" + newArr[i].missed_votes_pct + "</td>";
}
document.getElementById("senateLeastAtt").innerHTML=datos5;
}
leastEnga()
//SECOND HTML TABLE 2
function mostEnga(){
function attPartySort(a,b) {
if (a.missed_votes_pct > b.missed_votes_pct)
return -1;
if (a.missed_votes_pct < b.missed_votes_pct)
return 1;
return 0;
}
newArr.sort(attPartySort);
var datos2="<tr><th>" + headersSenateAtt.Name + "</th><th>"+ headersSenateAtt.NumMissVot + "</th><th>" + headersSenateAtt.PctMiss+ "</th><th>";
for(var i=0; i<10; i++){
datos2+="<tr><td><a target='_blank' href=" + newArr[i].nameLink + ">"+ newArr[i].fullName + "</a></td><td>" + newArr[i].missVot
+ "</td><td>" + newArr[i].missed_votes_pct + "</td>";
}
document.getElementById("senateMostAtt").innerHTML=datos2;
}
mostEnga()
第一个网页
<div class="w-100"></div>
<div class="col-6"><h2>Least Loyal (Bottom 10% of Party)</h2></div>
<div class="col-6"><h2>Most Loyal (Top 10% of Party)</h2></div>
<div class="w-100"></div>
<div class="col-6">
<table onload="function()" class="table table-hover table-sm" id="senateLeast"></table></div>
<div class="col-6">
<table onload="function()" class="table table-hover table-sm" id="senateMost">
</table></div>
第二个网页
<div class="w-100"></div>
<div class="col-6"><h2>Least Engaged (Bottom 10% Attendance)</h2></div>
<div class="col-6"><h2>Most Engaged (Top 10% Attendance)</h2></div>
<div class="w-100"></div>
<div class="col-6">
<table onload="lastEnga()" class="table table-hover table-sm" id="senateLeastAtt"></table></div>
<div class="col-6">
<table onload="mostEnga()" class="table table-hover table-sm" id="senateMostAtt">
</table></div>
第一个问题是你在定义每个函数后运行它，所以所有 4 个函数都在两个表上运行。
function leastLoyal(){
// ...
}
leastLoyal() // <-- remove this
删除每个函数之后的函数调用。
其次，onload不会在table上开火.您可以改为将属性放在正文上：
<body onload="leastEnga();mostEnga()">
...
<div class="col-6">
<table class="table table-hover table-sm" id="senateLeastAt"></table>
</div>
<div class="col-6">
<table class="table table-hover table-sm" id="senateMostAtt">
</table>
</div>
</body>
您还在函数中使用了许多未定义的变量，因此我希望这不是完整的代码。