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

Question

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>

Answer 1

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.