using .getElementsByClassName in a selector

Question

I'm trying to use .getElementsByClassName instead of .getElementById to retrieve values in a selector when a certain option is selected. There are multiple values in a table so I need to use Classes to select all of these values instead of IDs.

I realize I don't have .selectedIndexs for all the values. This first one I generated was a test to see if it would work. It's not working.

Can someone tell me what I'm doing wrong?

Here's what I have so far:

<script>    
function other() {    
if (document.getElementsByClassName("SBA")[0].selectedIndex == "16") { } 
else { document.getElementsByClassName("SBA")[0].style.display = "none"; }
}
</script>

<style>

.roomselector select { color: #0E4D8D;
                       border: 0px transparent;
                       width: 50%; }                       

option { border: 0px transparent; }

</style>

<div class="roomselector">
<select id="room" onchange="other()">
<option selected="selected" value="0">All Room Types</option>
<option value="1">Single Room</option>
<option value="2">Single Suite</option>
<option value="3">Double Room</option>
<option value="4">Double Suite</option>
<option value="5">Two Room Double</option>
<option value="6">Two Room Triple</option>
<option value="7">Two Room Quad</option>
<option value="8">Triple Room</option>
<option value="9">Economy Triple</option>
<option value="10">Late Application Triple</option>
<option value="11">Three Room Triple</option>
<option value="12">Three Room Quad</option>
<option value="13">Four Person Apartment</option>
<option value="14">Quad Room</option>
<option value="15">Private Bedroom Apartment</option>
<option value="16">Shared Bedroom Apartment</option>
<option value="17">Super Suite</option>
</select></div>

<table>
<caption style="background: #0E4D8D;"><h1 style="text-align: center; color: #fff; padding-top: 10px;">Beaty Towers</h1>
<br /><h4 style="color:#6392BE;">Towers</h4></caption>
<tbody>
<tr style="background: #b9d3ee; border-bottom: 1px solid #0E4D8D;">
<td>
<h4>Residence Hall</h4>
 </td>
<td>
<h4>Room Type</h4>
</td>
<td>
<h4>Room Rate</h4>
</td>
</tr>
<tr class="SBA" style="background: #EFEFEF;">
<td><strong>Towers</strong></td>
<td>Shared Bedroom Apartment</td>
<td>$2,000</td>
</tr>
</tbody>
</table>

Answer 1

Problem is with the if condition, document.getElementsByClassName("SBA")[0] returns the tr element which doesn't have selectedIndex property. You need to the select tag by id so change it to if(document.getElementById("room").selectedIndex == "16")

function other() {
  console.log(document.getElementById("room").selectedIndex);
  if (document.getElementById("room").selectedIndex == 16) {
    document.getElementsByClassName("SBA")[0].style.display = "block";
  } else {
    document.getElementsByClassName("SBA")[0].style.display = "none";
  }
}

<style>
  .roomselector select {
    color: #0E4D8D;
    border: 0px transparent;
    width: 50%;
  }
  option {
    border: 0px transparent;
  }
</style>

<div class="roomselector">
  <select id="room" onchange="other()">
    <option selected="selected" value="0">All Room Types</option>
    <option value="1">Single Room</option>
    <option value="2">Single Suite</option>
    <option value="3">Double Room</option>
    <option value="4">Double Suite</option>
    <option value="5">Two Room Double</option>
    <option value="6">Two Room Triple</option>
    <option value="7">Two Room Quad</option>
    <option value="8">Triple Room</option>
    <option value="9">Economy Triple</option>
    <option value="10">Late Application Triple</option>
    <option value="11">Three Room Triple</option>
    <option value="12">Three Room Quad</option>
    <option value="13">Four Person Apartment</option>
    <option value="14">Quad Room</option>
    <option value="15">Private Bedroom Apartment</option>
    <option value="16">Shared Bedroom Apartment</option>
    <option value="17">Super Suite</option>
  </select>
</div>

<table>
  <caption style="background: #0E4D8D;">
    <h1 style="text-align: center; color: #fff; padding-top: 10px;">Beaty Towers</h1>
    <br />
    <h4 style="color:#6392BE;">Towers</h4>
  </caption>
  <tbody>
    <tr style="background: #b9d3ee; border-bottom: 1px solid #0E4D8D;">
      <td>
        <h4>Residence Hall</h4>
      </td>
      <td>
        <h4>Room Type</h4>
      </td>
      <td>
        <h4>Room Rate</h4>
      </td>
    </tr>
    <tr class="SBA" style="background: #EFEFEF;">
      <td><strong>Towers</strong>
      </td>
      <td>Shared Bedroom Apartment</td>
      <td>$2,000</td>
    </tr>
  </tbody>
</table>