I need to change some of the table td class that have same innerhtml in an input box

Question

For example : i have an input box that contains a few cell names:

<input type="text" id="occuredrooms" value="001 002 003 006">

and a table :

    <table class="table">
    <tr>
        <td class="room active">001</td>
        <td class="room active">002</td>
        <td class="room active">003</td>
        <td class="room active">004</td>
    </tr>
    <tr>
        <td class="room active">005</td>
        <td class="room active">006</td>
        <td class="room active">007</td>
        <td class="room active">008</td>
    </tr>
    <tr>
        <td class="room active">009</td>
        <td class="room active">010</td>
        <td class="room inactive">011</td>
        <td class="room active">012</td>
    </tr>
</table>
<style>
    .room.active{
        background-color: greenyellow;

    }
    .room.inactive{
        background-color: rgb(151, 49, 49);
    }
</style>

how can I change those to classes that match the input into inactive? Please help. I manage to go this far but :(( It somehow still doesn't work.

let arr = document.getElementById('occuredrooms').value.split(' ');
        var x = document.getElementsByClassName('room');
        for (i = 0; i <= arr.length - 1; i++) {
            for(j=0;j<=x.length-1;j++){
                if(x[j].innerHTML==arr[i]){
                    x[j].removeClass('active').addClass('inactive');
                }
            }
        }

Answer 1

HI working example

I've made the changes and given you a working version

HTML

<input type="text" id="occuredrooms" value="" onChange="updateTable()">
<table class="table">
    <tr>
        <td class="room active">001</td>
        <td class="room active">002</td>
        <td class="room active">003</td>
        <td class="room active">004</td>
    </tr>
    <tr>
        <td class="room active">005</td>
        <td class="room active">006</td>
        <td class="room active">007</td>
        <td class="room active">008</td>
    </tr>
    <tr>
        <td class="room active">009</td>
        <td class="room active">010</td>
        <td class="room inactive">011</td>
        <td class="room active">012</td>
    </tr>
</table>

javascript

function updateTable(e){
  if(!document.getElementById('occuredrooms').value){
        var x = document.getElementsByClassName('room');
      for(j=0;j<=x.length-1;j++){
          x[j].classList.remove('active');
          x[j].classList.add('inactive');
    }
  }
    let arr = document.getElementById('occuredrooms').value.split(' ');
  var x = document.getElementsByClassName('room');
  for (i = 0; i <= arr.length - 1; i++) {
    for(j=0;j<=x.length-1;j++){
      if(x[j].innerHTML==arr[i]){
        x[j].classList.add('active');
        x[j].classList.remove('inactive');
      }
    }
  }
}
  var x = document.getElementsByClassName('room');
    for(j=0;j<=x.length-1;j++){
        x[j].classList.remove('active');
        x[j].classList.add('inactive');
    }

CSS

    .room.active{
        background-color: greenyellow;

    }
    .room.inactive{
        background-color: rgb(151, 49, 49);
    }