香草 JavaScript 复选框在选中时不起作用

Question

我尝试在每次选中某些复选框时更改 div 元素的颜色饱和度。

    allCheckBoxes.forEach(box => {
      if(box.checked) {
        satura -= 51;
        console.log('checked')
      }
    })

它不起作用，甚至无法登录到控制台。根据所有教程，一切似乎都是正确的。我之前用复选框成功地尝试过几乎相同的事情。因此，与我自己的代码和 Whosebug 中的任何类似问题相比，我找不到任何错误。我使用 Chrome，但也在 Firefox 中尝试过。我试图将复选框从标签中移除，也没有用。请帮助我找到解决方案。任何建议将不胜感激。提前致谢。

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <style>
    * {
      box-sizing: border-box;
    }
    
    #schedule td {
      width: 70px;
      height: 30px;
      text-align: center;
      border: 1px solid blue;
    }
    
    #schedule td:nth-child(2) {
      width: 100px;
    }
    
    .date {
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: Verdana, Geneva, Tahoma, sans-serif;
      font-size: 1rem;
      padding: 3px;
      --color: 255;
      background-color: rgb(var(--color), 255, var(--color));
    }
    
    .date {
      width: 40px;
      height: 40px;
      border: 1px solid red;
    }
  </style>
</head>

<body>
  <div id="calendar">
    <div class="date 19">19</div>
  </div>
  <div id="today"></div>
  <div id="schedule"></div>


  <script>
    "use strict";
    const schedule = document.getElementById('schedule');
    let tasks = ['Code', 'Study', 'Tests', 'Sport', 'English'];
    let headers = ['Number', 'Task', 'Hours', 'Check'];
    let table = '<table>';

    let tr = '<tr>';
    for (let head of headers) {
      tr += `<th>${head}</th>`;
    }
    tr += '</tr>';
    table += tr;
    for (let i = 0; i < tasks.length; i++) {
      let tr = '<tr>';
      tr += `<td>${i+1}</td><td>${tasks[i]}</td><td></td><td></td>`;
      tr += '</tr>';
      table += tr;
    }
    table += '</table>'
    schedule.innerHTML = table;
    document.getElementsByTagName("table")[0].style.borderCollapse = "collapse";

    //add checkboxes to last column in a table
    let allRows = Array.from(document.getElementsByTagName('tr'));
    allRows.forEach(row => {
      //remove checkbox from <th> 
      if (allRows.indexOf(row) === 0) return
      let input = document.createElement('input');
      input.setAttribute('type', 'checkbox');
      row.childNodes[3].appendChild(input);
      //add input of hours
      let inputHours = document.createElement('input');
      inputHours.style.width = '100%';
      inputHours.style.height = '100%';
      inputHours.style.border = 'none';
      inputHours.style.textAlign = 'center';
      row.childNodes[2].appendChild(inputHours);
    })

    //fill calendar in accordance with checked inputs
    let dates = document.querySelectorAll('.date');
    let today;

    setInterval(() => {
      const todayDiv = document.getElementById('today');
      today = new Date().toUTCString();
      todayDiv.innerHTML = today;
    }, 1000);

    //filter all checkboxes
    let allCheckBoxes = [];
    let allInputs = document.querySelectorAll('input');
    allInputs.forEach(inp => {
      if (inp.getAttribute('type') === 'checkbox') {
        allCheckBoxes.push(inp);
      }
    });
    console.log(allCheckBoxes)

    //bind current date and calendar's day. color saturation 
    dates.forEach(date => {
      let day = today = new Date().getDate();
      if (date.classList.contains(day)) {
        let satura = 255;
        allCheckBoxes.forEach(box => {
          if (box.checked) {
            satura -= 51;
            console.log('checked')
          }
        })
        date.style.setProperty("--color", satura);
      }
    })
  </script>
</body>

</html>

Answer 1

添加了按钮和事件监听器。现在可以使用了


    let colorize = document.querySelector('.colorize')
    colorize.addEventListener('click', () => {
      dates.forEach(date => {
        let day = today = new Date().getDate();
        if(date.classList.contains(day)) {
          let satura = 255;
          allCheckBoxes.forEach(box => {
            if(box.checked) {
              satura -= 51;
              console.log('checked')
            }
          })
          date.style.setProperty("--color", satura);
        }
      })
    })

香草 JavaScript 复选框在选中时不起作用

Vanilla JavaScript Checkbox Doesn't Work When Checked

javascript

checkbox

checked