Why does my variable become undefined after changing display of another variable?

Question

I am trying to hide certain rows that are under a specific unique ID. example:

<tbody id="row0">
  <tr class="state0"></tr>
  <tr class="state1"></tr>
  <tr class="state2"></tr>
  <tr class="state3"></tr>
</tbody>

I can find a specific row with:

var state0 = document.getElementById('row0').getElementsByClassName('state0');
var state1 = document.getElementById('row0').getElementsByClassName('state1');

then hide two rows like so:

for (let index in state0) {state0[index].style.display = 'none'}
for (let index in state1) {state1[index].style.display = 'none'}

and end up getting an error saying that state1 is no longer defined once I hide the row of state0. This happens whenever I hide one row, the next ends up being undefined even after I get element by id again straight after. Can someone help me and explain why this happens?

Answer 1

<tbody id="row0">
  <tr class="state0"></tr>
  <tr class="state1"></tr>
  <tr class="state2"></tr>
  <tr class="state3"></tr>
</tbody>

var state0 = document.querySelector('#row0 > .state0');
var state1 = document.querySelector('#row0 > .state1');

state0.style.dysplay = 'none';
state1.style.dysplay = 'none';

Besides,

for (index in state0) {
   // index will be a property of the state0 object
   // state0 is not an array and has other properties than child indices, for example length, item, namedItem ...
   // state0['length'] have not property 'style'
}

You can use

for (var i = 0; i <state0.length; i ++) {
   var indexOfChild = state0 [i];
   ...
}