So i have this code that makes a bar chart that would shows a teaching points an university has. But, when i try to choose a university, the value of teaching1, 2 and 3 would just sit empty. Heres the HTML:

<th width="300px">
            <select class="form-control" id="select1" onchange="item1(this.value)">
              <option value="0">-- Select Anyone --</option>
            </select>
          </th>
          <th width="300px">
            <select class="form-control" id="select2" onchange="item2(this.value)">
              <option value="0">-- Select Anyone --</option>
            </select>
          </th>
          <th width="300px">
            <select class="form-control" id="select3" onchange="item3(this.value)">
              <option value="0">-- Select Anyone --</option>
            </select>
          </th>

 <tr>
          <th>Teaching</th>
          <td id="teaching1">N/A</td>
          <td id="teaching2">N/A</td>
          <td id="teaching3">N/A</td>
        </tr>
  

Javascript:

var ctxTeaching = document.getElementById('chartTeaching').getContext('2d');
new Chart(ctxTeaching, {
  type: 'bar',
  data: {
    labels: ['University 1', 'University 2', 'University 3'],
    datasets: [{
      label: 'Teaching',
      data: [
        document.getElementById("teaching1").innerHTML,
        document.getElementById("teaching2").innerHTML,
        document.getElementById("teaching3").innerHTML
      ],
      backgroundColor: 'rgba(75, 192, 192, 0.6)',
      borderColor: 'rgba(75, 192, 192, 1)',
      borderWidth: 1
    }]
  },
  options: {
    responsive: true,
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
});

i tried using ais and stuff but i just still cant get a clue of whats wrong with the code

Before i use the new code, i did this and it works just fine. But, it will shows all the Unviersities from the JS file

var ctxTeaching = document.getElementById('chartTeaching').getContext('2d');
new Chart(ctxTeaching, {
  type: 'bar',
  data: {
    labels: teachingValues.map((_, i) => `University ${i + 1}`),
    datasets: [{
      label: 'Teaching',
      data: teachingValues,
      backgroundColor: 'rgba(75, 192, 192, 0.6)',
      borderColor: 'rgba(75, 192, 192, 1)',
      borderWidth: 1
    }]
  },
  options: {
    responsive: true,
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
});