Как я могу назначить определенную функцию различным HTML-страницам в одном файле JS?

Question

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

В консоли браузера отображается: Uncaught TypeError: Невозможно установить свойство '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>

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>

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