Vanilla JavaScript Checkbox Doesn't Work When Checked

Question

I try to make changes with color saturation of div element every time some checkbox is checked.

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

It doesn't work, even can not log into console. According all tutorials everything seems right. I tried successfully almost the same things with checkbox before. So I can not find any mistakes comparing with my own code and any similar questions in Stackoverflow. I use Chrome, but tried in Firefox as well. I tried to put checkboxes out of tags, doesn't work either. Please help me to find the solution. Any suggestions will very much appreciated. Thanks in advance.

 <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

added a button and eventListener. now it works


    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);
        }
      })
    })

Vanilla JavaScript Checkbox Doesn't Work When Checked

Question

1 answers

solution1
0 ACCPTED 2020-11-19 20:45:31

Vanilla JavaScript Checkbox Doesn't Work When Checked

Question

1 answers

solution1 0 ACCPTED 2020-11-19 20:45:31

solution1
0 ACCPTED 2020-11-19 20:45:31