Whenever a selection is made from the dropdown menu, a script triggers to change the background color of the selected number in the table header.
I'm trying to figure out how to revert the background color back to its original state after making a new selection. Any suggestions?
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>