Как правильно сделать кнопки «выполнено» и «удалить» в контейнере дела, приложение Todo?

Question

[NikitaSemenov21]

Что мне делать если в Todo list при нажатии на кнопку "выполнено" не выделяется это дело на котором находится кнопка, а выделяется последний элемент из списка, аналогично с кнопкой "удалить" . Я прикрепил ещё видео, как это выглядит https://disk.yandex.ru/i/_7oZtzxR0-sXzw
Вот код приложения Todo:

document.addEventListener('DOMContentLoaded', function() {
    let input = document.getElementById('input-todo');
    let button = document.getElementById('button-todo');
    let containerTodo = document.getElementById('container-todo-list');
    let errorMessage = document.getElementById('description-input-task');
    let createTodoButton = document.getElementById('button-todo');
    let containerTask;
    let textConteiner;
    let timeCreating;
    let textTodo;
    let containerButtons;
    let timeСompleted;
    let doneButton;
    let deleteButton;
    let idTodo;

    const generatedIDs = new Set(); // Создаем набор для хранения уникальных ID

    function generateUniqueID() {
        while (true) {
            const randomID = Math.floor(1000 + Math.random() * 9000); // Генерируем случайное четырёхзначное число

            if (!generatedIDs.has(randomID)) { // Проверяем, не существует ли уже такого ID
            generatedIDs.add(randomID); // Добавляем ID в набор
            return randomID; // Возвращаем уникальный ID
            }
        };
    };

    function date() {
        let time = new Date();
        let year = time.getFullYear();
        let month = time.getMonth();
        let day = time.getDate();
        let hours = time.getHours();
        let minute = time.getMinutes();
        let seconds = time.getSeconds();
        return `${year}.${month + 1}.${day} ${hours}:${minute}:${seconds}`;
    }


    function addTaskInTodoList(idTask, textTask, dateCreate) {
        containerTask = document.createElement('div');
        textConteiner = document.createElement('div');
        timeCreating = document.createElement('p');
        textTodo = document.createElement('h3');
        containerButtons = document.createElement('div');
        timeСompleted = document.createElement('p');
        doneButton = document.createElement('button');
        deleteButton = document.createElement('button');


        containerTask.classList.add('conteiner-element');
        textConteiner.classList.add('text-container');
        timeCreating.classList.add('time-creating');
        textTodo.classList.add('text-todo');
        containerButtons.classList.add('container-buttons');
        containerButtons.id = idTask;
        timeСompleted.classList.add('date-create-todo');
        doneButton.classList.add('done-btn');
        deleteButton.classList.add('delete-btn');

        idTodo = idTask;
        timeCreating.innerHTML = `id: ${idTask}. Создан: ${dateCreate}`;
        textTodo.innerHTML = textTask;
        doneButton.textContent = 'Выполнено';
        deleteButton.textContent = 'Удалить';

        containerTodo.append(containerTask);
        containerTask.append(textConteiner);
        textConteiner.append(textTodo);
        textConteiner.append(timeCreating);
        containerTask.append(containerButtons);
        containerButtons.append(doneButton);
        containerButtons.append(deleteButton);

        doneButton.addEventListener('click', () => {      
            fetch('/listTodo')
            .then(response => response.json())
            .then(data => {
                data.forEach(getIdTodo => {
                    if (getIdTodo.id === idTodo) {
                        timeСompleted.innerHTML = `Выполнен ${date()}`;
                        containerButtons.appendChild(timeСompleted);
                        doneButton.classList.add('done-btn-active');
                        containerTask.classList.add('block-bg-active');
                        doneButton.disabled = true;
                    }
                });
            }).catch(err => console.log('Error', err)); 
            
        })
    };

    function addTaskInTodoListServer() {
        fetch('/listTodo', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ 
                id: generateUniqueID(),
                text: input.value,
                completed: false,
                timeCreate: date()
            }),
            })
            .then(response => response.json())
            .then(() => {})
            .catch(error => console.error('Error:', error));
    }; 
    
    
    function getDataTodo() {
        fetch('/listTodo')
        .then(response => response.json())
        .then(data => {
            console.log('Todo list:', data);
            data.forEach(todo => {
                addTaskInTodoList(todo.id, todo.text, todo.timeCreate);
            });
        })
        .catch(err => console.log('Error', err));
    }
    
    button.addEventListener('click', function() {
        if (input.value === '') {
            input.style.border = '2px solid #d12121';
            createTodoButton.style.border = '2px solid #d12121';
            errorMessage.innerHTML = 'Введите свою цель';
            errorMessage.style.color = '#d12121';
        } else {
            addTaskInTodoList(generateUniqueID(), input.value, date());
            addTaskInTodoListServer();
            input.style.border = '2px solid #109860';
            createTodoButton.style.border = '2px solid #109860';
            errorMessage.innerHTML = '*Вижу цель не вижу припятствий*';
            errorMessage.style.color = '#5f5f5f';
            input.value = '';
        } 
        
    })
    getDataTodo();
});

Answer 1

[Ivan Ustûžanin]

потому что в переменной timeСompleted всегда находится последний созданный элемент, так работают замыкания

глубоко не вникал, но скорее всего поможет объявление всего создаваемого в addTaskInTodoList() в ней самой, а не в DOMContentLoaded

Comments

[NikitaSemenov21]

Спасибо большое, Иван!