HTML Table-change header background color to it's original colour

May 29, 2022

When I make a selection from the dropdown, a script runs and changes the background colour of the selected number in the table header.

How would I change the colour back to it’s original background colour after I make a new selection?

function doIt() {
  var array = [10, 20, 30, 40, 50];
  var a = document.getElementById("select").value;
  var found = array.findIndex(function (element) {
      return element >= a;
  });
document.getElementById("b").value = found;

document.getElementById('t').rows[0].cells[found].style.backgroundColor="#FF0000";
}

th {
  border: 2px solid #999;
  padding: 0.5rem;
  text-align: left;
  background-color: goldenrod;
}

  <label for="Select">Select Number:</label>
  <select id="select" onchange="doIt()";>
      <option>Select</option>
      <option>10</option>
      <option>20</option>
      <option>30</option>
      <option>40</option>
      <option>50</option>
  </select> 
  <input type="text" id="b">
</p>
<table id="t">
  <tbody>
  <tr>
  <th>10</th>
  <th>20</th>
  <th>30</th>
  <th>40</th>
  <th>50</th>
  </tr>
  </tbody>
  </table>

>Solution :

You should "unhightlight" other cells first:

function doIt() {
  var array = [10, 20, 30, 40, 50];
  var a = document.getElementById("select").value;
  var found = array.findIndex(function (element) {
      return element >= a;
  });
  document.getElementById("b").value = found;
  var cells = document.getElementById('t').rows[0].cells;
  for(var i = 0; i < cells.length; i++) {
    cells[i].style.backgroundColor="goldenrod";
  }
  cells[found].style.backgroundColor="#FF0000";
}

th {
  border: 2px solid #999;
  padding: 0.5rem;
  text-align: left;
  background-color: goldenrod;
}

<label for="Select">Select Number:</label>
  <select id="select" onchange="doIt()";>
      <option>Select</option>
      <option>10</option>
      <option>20</option>
      <option>30</option>
      <option>40</option>
      <option>50</option>
  </select> 
  <input type="text" id="b">
</p>
<table id="t">
  <tbody>
  <tr>
  <th>10</th>
  <th>20</th>
  <th>30</th>
  <th>40</th>
  <th>50</th>
  </tr>
  </tbody>
  </table>

And I would recommend you no to change style property (background-color) directly, but add/remove class for element. With class you can attach as many CSS-rules, as you want.