Coloured drop down menu not working in html-CodePudding

This is my code. I want to highlight the border of the dropdown in red if the checkbox is checked and if the value is 0. If the value is not zero and the checkbox's checked, green, if the checkbox is not selected, gray.

It gives me error but i cannot understand why.

In the js script i tried to insert another else, outside of the first if, but when i do that, the code doesn't work. If i do not insert that, the code works properly, but when i uncheck the checkbox, the colour red/green doesn't go away

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>
              <option value="4">4</option>
              <option value="4.5">4.5</option>
              <option value="5">5</option>
              <option value="5.5">5.5</option>
              <option value="6">6</option>
              <option value="6.5">6.5</option>
              <option value="7">7</option>
              <option value="7.5">7.5</option>
              <option value="8">8</option>
              <option value="8.5">8.5</option>
              <option value="9">9</option>
              <option value="9.5">9.5</option>
              <option value="10">10</option>
            </select>
            <input type="checkbox" name="item" value="Secondo esercizio" id = "checkbox1" style="display: inline-block;">Primo esercizio
          </li>
          <hr>
          <li>
            <select id="punteggio2">
              <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>
              <option value="4">4</option>
              <option value="4.5">4.5</option>
              <option value="5">5</option>
              <option value="5.5">5.5</option>
              <option value="6">6</option>
              <option value="6.5">6.5</option>
              <option value="7">7</option>
              <option value="7.5">7.5</option>
              <option value="8">8</option>
              <option value="8.5">8.5</option>
              <option value="9">9</option>
              <option value="9.5">9.5</option>
              <option value="10">10</option>
            </select>
            <input type="checkbox" name="item" value="Secondo esercizio" id = "checkbox1" style="display: inline-block;">Secondo esercizio</input>
          </li>
          <hr>
          <li>
            <select id="punteggio3">
              <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>
              <option value="4">4</option>
              <option value="4.5">4.5</option>
              <option value="5">5</option>
              <option value="5.5">5.5</option>
              <option value="6">6</option>
              <option value="6.5">6.5</option>
              <option value="7">7</option>
              <option value="7.5">7.5</option>
              <option value="8">8</option>
              <option value="8.5">8.5</option>
              <option value="9">9</option>
              <option value="9.5">9.5</option>
              <option value="10">10</option>
            </select>
            <input type="checkbox" name="item" value="Terzo esercizio" id = "checkbox1" style="display: inline-block;">Terzo Esercizio</input>
          </li>
          <hr>

        </ol>

CodePudding user response：

setInterval(() => {
    document.querySelectorAll('#ordered li').forEach((li) => {
        const select = li.querySelector('select')
        const checkbox = li.querySelector('input[type=checkbox]')
        if(checkbox.checked) {
            if(select.value == '0') {
                select.style.borderColor = 'red';
            }
            else {
                select.style.borderColor = 'green';
            }
        }
        else {
            select.style.borderColor = 'grey';
        }   
    });
}, 100);

CodePudding user response：

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';
              }else{
                select.style.borderColor = 'green';
                select.style.borderWidth = '2px';
              }
            } 
          });
        }, 100);

[id^="punteggio"] {padding: 8px 10px; border-radius: 5px; border: 2px 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>
              <option value="4">4</option>
              <option value="4.5">4.5</option>
              <option value="5">5</option>
              <option value="5.5">5.5</option>
              <option value="6">6</option>
              <option value="6.5">6.5</option>
              <option value="7">7</option>
              <option value="7.5">7.5</option>
              <option value="8">8</option>
              <option value="8.5">8.5</option>
              <option value="9">9</option>
              <option value="9.5">9.5</option>
              <option value="10">10</option>
            </select>
            <input type="checkbox" name="item" value="Secondo esercizio" id = "checkbox1" style="display: inline-block;">Primo esercizio
          </li>
          <hr>
          <li>
            <select id="punteggio2">
              <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>
              <option value="4">4</option>
              <option value="4.5">4.5</option>
              <option value="5">5</option>
              <option value="5.5">5.5</option>
              <option value="6">6</option>
              <option value="6.5">6.5</option>
              <option value="7">7</option>
              <option value="7.5">7.5</option>
              <option value="8">8</option>
              <option value="8.5">8.5</option>
              <option value="9">9</option>
              <option value="9.5">9.5</option>
              <option value="10">10</option>
            </select>
            <input type="checkbox" name="item" value="Secondo esercizio" id = "checkbox1" style="display: inline-block;">Secondo esercizio</input>
          </li>
          <hr>
          <li>
            <select id="punteggio3">
              <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>
              <option value="4">4</option>
              <option value="4.5">4.5</option>
              <option value="5">5</option>
              <option value="5.5">5.5</option>
              <option value="6">6</option>
              <option value="6.5">6.5</option>
              <option value="7">7</option>
              <option value="7.5">7.5</option>
              <option value="8">8</option>
              <option value="8.5">8.5</option>
              <option value="9">9</option>
              <option value="9.5">9.5</option>
              <option value="10">10</option>
            </select>
            <input type="checkbox" name="item" value="Terzo esercizio" id = "checkbox1" style="display: inline-block;">Terzo Esercizio</input>
          </li>
          <hr>

        </ol>