Как изменить содержимое ячейки на основе порога

Question

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

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

 function Threshold_Process(){
      var totalThreshold = 0;
      var totalOutput;
      var garlic_statement;
      var shadow_statement;
      var pale_statement;
      if(!document.getElementById("galic_checkbox").checked)
      {
        totalThreshold = totalThreshold +3;
      }
      else
      {
        garlic_statement = "The user likes garlic";
      }

      if(!document.getElementById("shadow_checkbox").checked)
      {
        totalThreshold = totalThreshold +4;
      }
      else
      {
        shadow_statement = "The user has a shadow";
      }
      if (document.getElementById("pale_checkbox").checked) 
      {
        totalThreshold = totalThreshold+3;
      }
      if (totalThreshold>6)
      { 
        var i;
        for(i=0; i < id; i++) {
         var change =document.getElementById(id);
         change.insertCell(2).innerHTML= "The Vampire";
         change.deleteCell(3);
        }
      }
      else 
      {
        totalOutput = " The user is not a vampire because:" +shadow_statement + " " + garlic_statement; 
      }
    }

Это моя функция вставки строки.

<script type="text/javascript">
      var id =1;
    function insert_row(){
      var firstName = document.getElementById('first_name').value;
      var lastName = document.getElementById('last_name').value;

      var table = document.getElementById("saving_table");

      // Create an empty <tr> element and add it to the 1st position of the table:
      var row = table.insertRow(1);

      row.id=id;
      var rowId = row.id;


      // Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element:
      var cell1 = row.insertCell(0);
      var cell2 = row.insertCell(1);
      var cell3 = row.insertCell(2);

      // Add some text to the new cells:
      cell1.innerHTML = firstName;
      cell2.innerHTML = lastName;
      cell3.innerHTML = "human";
       id++;
    }

Как и моя инициализация таблицы

 <div class="container">
 <table class="table table-bordered" id="saving_table">
    <caption>Classmates</caption>
    <thead>
      <tr>
        <th>FirstName</th>
        <th>LastName</th>
        <th>Human or Vampire?</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
  <button class="btn btn-primary" onclick="insert_row()">Submit</button>