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>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.