Блог

Имея 2 похожие страницы, отображающие таблицы с разными данными, в HTML я вызываю каждую конкретную функцию для вывода данных. Каждая таблица имеет свой собственный идентификатор и конкретную функцию в JS, как показано ниже. На одной из страниц таблицы данных отображаются хорошо, а на другой — нет.

Консоль браузера показывает: Неперехваченная ошибка типа: не удается установить для свойства ‘innerHTML’ значение null, по крайней мере, loyal (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>
  

Первая проблема заключается в том, что вы запускаете каждую функцию после ее определения, поэтому все 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>
  

Вы также используете много неопределенных переменных в функциях, поэтому я надеюсь, что это не полный код.