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>
Aucun commentaire:
Enregistrer un commentaire