I’m beginner in JS, decided to try making ToDoList app. When the user creates just one task, everything works fine, but when two or more tasks, the action buttons (mark as favourite, as completed) start working in a strange way. If the latest created task is even, then all even tasks can be correctly marked by action buttons, but odd tasks’ buttons do nothing because changeFavStatus and changeCompleteStatus are being called twice (instead of once) so the string section.classList.toggle('favourite'); is being called twice. I know I can use just .classList.remove() and .classList.add(), but those functions still will be called twice. So I want changeFavStatus and changeCompleteStatus functions to be called once. What did I do wrong?
HTML Code:
I tried chatting with AI, it just give suggestions such as “don’t forget to remove event listeners before assigning event listeners”, but I already have lines button.removeEventListener('click', changeFavStatus); in each changeXXXStatus function
here is the output, that shows that the functions are being called twice:
created only one section and marked it as favourite. one call of function as expected:
created two sections and tried to mark the first section as favourite. two calls of function:
let input = document.getElementById('header__search');
let button = document.getElementById('header__form__submit-btn');
button.addEventListener('click', () => processInput());
window.addEventListener('keypress', e => e.key === 'Enter' ? processInput() : '');
const resetButtons = () => {
let buttonsFavourite = document.querySelectorAll('.fav-button');
let buttonsComplete = document.querySelectorAll('.complete-button');
let buttonsDelete = document.querySelectorAll('.del-button');
console.log(buttonsFavourite, buttonsComplete, buttonsDelete);
[...buttonsFavourite].forEach(button => {
button.removeEventListener('click', changeFavStatus);
button.addEventListener('click', () => changeFavStatus(button));
});
[...buttonsComplete].forEach(button => {
button.removeEventListener('click', changeCompleteStatus);
button.addEventListener('click', () => changeCompleteStatus(button));
});
[...buttonsDelete].forEach(button => {
button.removeEventListener('click', alertDel);
button.addEventListener('click', () => alertDel(button));
});
};
const alertDel = el => {
let ans = confirm('Are you sure you want to delete this task?');
if (ans) deleteTask(el);
};
const buttonBackgrounds = {
defaultFav: 'url("images/default-star.png")',
markedFav: 'url("images/filled-star.png")',
defaultComplete: 'url("images/default-complete.png")',
markedComplete: 'url("images/filled-complete.png")'
};
const deleteTask = async el => {
const section = document.getElementById(`hideable-section-${el.classList[2]}`)
const sectionHideDiv1 = document.getElementById(`hideable-div-${el.classList[2]}-1`);
const sectionHideDiv2 = document.getElementById(`hideable-div-${el.classList[2]}-2`);
sectionHideDiv1.style.display = 'none';
sectionHideDiv2.style.display = 'none';
let seconds = 5;
const warning = document.createElement("p");
let warningText = document.createTextNode(`This task will disappear in ${seconds} seconds`);
warning.style.fontWeight = '700';
warning.style.color = 'red';
warning.appendChild(warningText);
section.appendChild(warning);
const intervalid = setInterval(() => {
seconds--;
warning.innerText = `This task will disappear in ${seconds} seconds`;
if (!seconds) {
clearInterval(intervalid);
section.remove();
}
}, 1000);
};
const changeFavStatus = el => {
const section = document.getElementById(`hideable-section-${el.classList[2]}`);
if (section.classList.contains('favourite')) {
el.style.backgroundImage = buttonBackgrounds.defaultFav;
} else {
el.style.backgroundImage = buttonBackgrounds.markedFav;
}
section.classList.toggle('favourite');
}
const changeCompleteStatus = el => {
const section = document.getElementById(`hideable-section-${el.classList[2]}`);
if (section.classList.contains('completed')) {
el.style.backgroundImage = buttonBackgrounds.defaultComplete;
} else {
el.style.backgroundImage = buttonBackgrounds.markedComplete;
}
section.classList.toggle('completed');
};
//
//createTask
//
const startCreatingTaskBtn = document.getElementById('start-creating-task');
const divForBlur = document.getElementById('blur-panel');
const frameDiv = document.getElementById('create-task');
const mainBlock = document.getElementById('main');
let clicks = 0;
startCreatingTaskBtn.addEventListener('click', () => blurMain());
const blurMain = () => {
divForBlur.style.filter = 'blur(2px)';
frameDiv.style.display = 'block';
};
const unBlurMain = () => {
divForBlur.style.filter = 'blur(0)';
frameDiv.style.display = 'none';
};
const createTaskDiv = document.getElementById('create-task');
const userInput = document.querySelectorAll('.user-input');
const createTaskBtn = document.getElementById('create-task__button');
createTaskBtn.addEventListener('click', () => taskBtnHandler());
const taskBtnHandler = () => {
unBlurMain();
const values = [...userInput].map(el => el.value);
createTask(values);
};
const createTask = values => {
clicks++;
const section = document.createElement('section');
const divTaskDesc = document.createElement('div');
const taskDesc = document.createElement('p');
const taskDescText = document.createTextNode(`Due to: ${values[1]} ${values[2]} ${values[0]}`);
const divTaskActions = document.createElement('div');
const favButton = document.createElement('button');
const completeButton = document.createElement('button');
const delButton = document.createElement('button');
taskDesc.appendChild(taskDescText);
section.classList.add('task', 'all');
section.setAttribute('id', `hideable-section-${clicks}`);
divTaskDesc.classList.add('task-desc');
divTaskActions.classList.add('task-actions');
divTaskDesc.setAttribute('id', `hideable-div-${clicks}-1`);
divTaskActions.setAttribute('id', `hideable-div-${clicks}-2`);
taskDesc.classList.add('task-description', clicks);
favButton.classList.add('action-button', 'fav-button', clicks);
completeButton.classList.add('action-button', 'complete-button', clicks);
delButton.classList.add('action-button', 'del-button', clicks);
divTaskDesc.appendChild(taskDesc);
divTaskActions.appendChild(favButton);
divTaskActions.appendChild(completeButton);
divTaskActions.appendChild(delButton);
section.appendChild(divTaskDesc);
section.appendChild(divTaskActions);
mainBlock.appendChild(section);
resetButtons();
};
//
//search
//
const processInput = () => {
if (input.value) {
const tasksDesc = document.querySelectorAll('.task-description');
const inputValue = input.value;
for (let taskDesc of tasksDesc) {
const pattern = new RegExp(`(.${inputValue}.)|(${inputValue}.)|(.${inputValue})`, `i`);
const currSection = document.getElementById(`hideable-section-${taskDesc.classList[1]}`);
taskDesc.textContent.search(pattern) === -1 ?
currSection.style.display = 'none' : currSection.style.display = 'flex';
}
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>ToDoList</title>
</head>
<body>
<div class="wrapper">
<div id="blur-panel">
<header id="header">
<div class="header__left-side">
<p>ToDoList</p>
</div>
<div class="header__middle-side">
<input type="text" id="header__search" placeholder="Search">
<button id="header__form__submit-btn" type="submit"></button>
</div>
<div class="header__right-side">
<button class="filter-button active-filter" id="default-filter">All</button>
<button class="filter-button">Favourite</button>
<button class="filter-button">Completed</button>
</div>
</header>
<main id="main">
</main>
<aside id="aside">
<button id="start-creating-task">Create</button>
</aside>
</div>
<div id="create-task">
<h1 class="create-task__title">Create task</h1>
<div class="create-task__inner-wrapper">
<div class="create-task__inner">
<label class='task-label' for="user-task-desc">Task description:</label>
<input id='user-task-desc' type="text" name="user-task-desc" class="user-input">
<label class='task-label' for="user-task-date">Due to (day):</label>
<input id='user-task-date' type="date" name="user-task-date" class="user-input">
<label class='task-label' for="user-task-time">Due to (time):</label>
<input id='user-task-time' type="time" name="user-task-time" class="user-input">
<div class="create-task__submit">
<button id="create-task__button">Create</button>
</div>
</div>
</div>
</div>
</div>
<script src="scripts/taskActions.js"></script>
</body>
</html>