In my code, I want to change the border color of the dropdown based on certain conditions. If the checkbox is checked and the value is 0, I want the border to be highlighted in red. If the value is not zero and the checkbox is checked, I want it to be green. If the checkbox is not selected, I want the border to be gray.
However, I keep getting an error and I can't figure out why.
I attempted to add another 'else' statement in the JavaScript script outside of the initial 'if', but that caused the code to stop working. When I don't include the additional 'else' statement, the code works fine initially, but the red/green border does not go away when I uncheck the checkbox.
setInterval(() => {
document.querySelectorAll('input[type="checkbox"]').forEach((checkbox, index) => {
const select = document.querySelector(`#punteggio${index+1}`);
if (checkbox.checked) {
if (select.value === '0') {
select.style.borderColor = 'red';
select.style.borderWidth = '2px';
}
}
});
}, 100);[id^="punteggio"] {padding: 8px 10px; border-radius: 5px; border: 1px solid gray; font-size: 16px;}
section {margin: 30px 0; display: flex; flex-wrap: wrap; justify-content: space-between;}
label, input {display:block; margin-bottom: 10px; font-size: 1.2em;}
label {font-weight: bold; min-width: 150px; display: inline-block;}
input[type="text"], input[type="checkbox"]{padding: 10px;border-radius: 5px; border: 1px solid lightgray; width: 100%;}
button[type="button"] {width: 100%;padding: 10px; background-color: lightblue; border-radius: 5px; color: #000;cursor: pointer;margin-top: 20px;}
#checkbox1 {width: 20px; height: 20px;border-radius: 15px; margin-right: 10px;}<ol id = "ordered">
<li>
<select id="punteggio1" >
<option value="0">0</option>
<option value="0.5">0.5</option>
<option value="1">1</option>
<option value="1.5">1.5</option>
<option value="2">2</option>
<option value="2.5">2.5</option>
<option value="3">3</option>
<option value="3.5">3.5</option>
...
</select>
<input type="checkbox" name="item" value="Secondo esercizio" id = "checkbox1" style="display: inline-block;">Primo esercizio
</li>
<hr>
// More list items with similar structure
</ol>