Question

在HTML中有2个相似的页面，显示带有不同数据的表，我调用每个特定的功能来输出数据。每个表都有自己的ID，以及在JS上的特定功能，如下所示。其中一页很好地显示了数据表，而另一页则没有。

浏览器控制台显示：Uncaught TypeError：无法将属性'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()

第一HTML

<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>

第二HTML

<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>

Answer 1

第一个问题是您在定义每个函数后都在运行它，因此所有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>

您还在函数中使用了许多未定义的变量，所以我希望这不是完整的代码。

如何在一个JS文件中将特定功能分配给不同的HTML页面？

1 个答案: