I am trying to dynamically change the background color of a row in a table when selecting an object from a dropdown list, but only if the selected number is even. The challenge I am facing is that the objects are created using JavaScript and not directly in the HTML file, so adding an onclick function to each object is not feasible. Please assist me with a solution as I am stuck.
HTML:
<select class = "form-select, col-6" id="quantiti" onclick = "ifSelectedLetHeadChange()" >
<!--
This was the original version that I copied:
<select class="form-select, col-6" id="quantiti"
onclick="ifSelectedLetHeadChange($(this).val())">
-->
</select>
JS:
function quantity(amount) {
var select = document.getElementById('quantiti');
for (var i = 0; i < amount; i++) {
select.options[select.options.length] = new Option(i + 1, i);
select.options[select.options.index] = i+1 ;
select.options[select.options.onclick]="ifSelectedOptionLetTrChange()";
}
}
quantity(10000);
function ifSelectedOptionLetTrChange(value) {
if (option.value % 2 ) {
$("tr").css("background-color", "lightblue");
} else {
$("tr").css("background-color", "blue");
}
}