Js Todo list help plz

Question

у меня проблема с списком дел. при нажатии на редактировать че-то не то происходит. и при нажатии на сохранить. я только учусь подскажите пожалуйста что я упускаю.? https://codepen.io/ernauzer-the-styleful/pen/dyowKJB ```

Answer 1

Вы забыли передать в функцию сам элемент, который собираетесь редактировать и берете всегда первый из списка. Поэтому и редактируется всегда только первый. Ну и еще трижды это пытаетесь сделать из-за цикла.

case 'edit':
    value = taskList.find(task => task.id === currentId).value;
    editTask(element.closest('.note-list__item')); 
    break;

И в самой функции не забудьте:

function editTask(editTaskObject) {
    const taskItem = editTaskObject //document.querySelector('.note-list__item');
    ... весь остальной код ...

const input = document.querySelector('input');
const form = document.querySelector('form');
const noteList = document.querySelector('ul');
let value = '';

function renderTask(taskObject) {
    // Создание елементов \\
    const taskItem = document.createElement('li');
    const taskItemContent = document.createElement('span');
    const taskItemBtnComplete = document.createElement('button');
    const taskItemBtnRemove = document.createElement('button');
    const taskItemBtnEdit = document.createElement('button');
    // Добавили класс \\
    taskItem.classList.add('note-list__item');
    taskItemContent.classList.add('notes');
    taskItemBtnComplete.classList.add('complete');
    taskItemBtnRemove.classList.add('remove');
    taskItemBtnEdit.classList.add('edit');
    // Добавили текст \\
    taskItemContent.innerText = taskObject.value;
    // Добавили к родителю \\
    taskItem.prepend(taskItemContent);
    taskItem.append(taskItemBtnComplete);
    taskItem.append(taskItemBtnRemove);
    taskItem.append(taskItemBtnEdit);
    // Добавили атрибут taskItem(li) \\
    taskItem.setAttribute('data-id',taskObject.id);
    // Проверка \\
    if (taskObject.completed) {
        taskItem.classList.add('note-list__item--completed');
    }
    return taskItem;
}
function editTask(editTaskObject) {
    const taskItem = editTaskObject;
    const taskItemEditSave = document.createElement('button');
    const taskItemEditCancel = document.createElement('button');
    taskItem.innerHTML = '<input type = text  class = text_edit>';
    const textEdit = document.querySelector('.text_edit');
    taskItem.classList.add('note-list__item');
    taskItemEditSave.classList.add('save');
    taskItemEditCancel.classList.add('cancel');

    // Добавили к родителю \\
    taskItem.append(taskItemEditSave);
    taskItem.append(taskItemEditCancel);
    //\\
    textEdit.value = value;
    // Ф-кция удаления потомков при нажатии на Edit \\
    function delChild (child) {
        for (let i = 0; i < child.length; i++) {

            switch (child[i].className) {
            case 'complete':
            case 'remove':
            case 'edit':
            case 'notes':
                child[i].style.display = 'none';
                break;
            }
        }
    }
    delChild(taskItem.children);
    return taskItem;
}

// Массив обьектов списка дел \\
let taskList = [];
// Событие клик на форму \\
form.addEventListener('submit', e => {
    e.preventDefault();
    if (input.value.trim()) {
        const task = {
            value: input.value,
            completed: false,
            id: String(new Date).slice(16,24).replace(/:/g,''),
        };
        // Добавили обьект(ы) в массив \\
        taskList.unshift(task);
        // Добавили ul вызов функции с агрументом обьекта \\
        noteList.prepend(renderTask(task));
        input.value = '';
    }
});

// Событие клик на кнопки \\
noteList.addEventListener('click', e => {
    const element = e.target;
    const targetClassName = e.target.className;
    let currentId;
    let inpEdit = noteList.querySelector('.text_edit');
    

    switch (targetClassName) {
        case 'remove':
        case 'complete':
        case 'edit':
        case 'save':
        currentId = element.closest('.note-list__item').getAttribute('data-id');
        break;
        
        
    }

    switch (targetClassName) {
        case 'remove':
            noteList.innerHTML = '';
            //Перезаписали масив = останутся те что не совпадают currentId \\
            taskList = taskList.filter(task => task.id !== currentId);
            // Добавили вызов ф-кции с обьектом заметки \\
            taskList.forEach(task => {
                noteList.append(renderTask(task));
            });
            break;

        case 'complete':
            // Если id совпадает то completed = true (выполнено) \\
            taskList.find(task => task.id === currentId).completed = true;
            noteList.innerHTML = '';
            // Добавили вызов ф-кции с обьектом заметки \\
            taskList.forEach(task => {
                noteList.append(renderTask(task));
            });
            break;

        case 'edit':
            value = taskList.find(task => task.id === currentId).value;
            editTask(element.closest('.note-list__item')); 
            break;

        case 'save':
            taskList.forEach(task => {
                noteList.innerHTML = '';
                if (task.id === currentId) {
                    task.value = inpEdit.value;
                }
                noteList.append(renderTask(task));
            })
        
        case 'cancel':
            noteList.innerHTML = '';
            taskList.forEach(task => {
                noteList.append(renderTask(task));
            });
    }
});

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 48px;
  height:100vh;
    margin: 0;
    
    font-family: sans-serif;
    background: linear-gradient(332deg, rgba(2,0,36,1) 0%, rgba(10,130,28,1) 43%, rgba(0,212,255,1) 100%);
}
input, button {
    font-size: 24px;
    border-radius: 10px;
    padding: 5px;
    border: none;
    outline: none;
}
.note-list__item span {
    margin: 0 10px;
}
.note-list {
    padding-left: 0;
    margin-top: 48px;
    font-size: 20px;
    list-style: none;
}
.note-list__item.note-list__item--completed {
    color: grey;
    text-decoration: line-through;
}
.notes {
    flex: 1;
}
.note-list__item {
    font-size: 28px;
    display: flex;
    align-items: center;
    border: 1px solid rgb(71, 46, 46);
    background: rgb(118, 235, 107);
    padding: 15px;
    margin: 5px 0;
    border-radius: 20px;
}
.input_text {
    padding-right: 10px;
    padding-left: 10px;
}
.complete {
    background: url(https://image.flaticon.com/icons/svg/2/2020.svg) no-repeat center;
    padding: 0;
    width: 30px;
    height: 30px;
}
.remove {
    background: url(https://image.flaticon.com/icons/svg/446/446046.svg) no-repeat center;
    padding: 0;
    width: 38px;
    height: 30px;
}
.edit {
    background: url(https://image.flaticon.com/icons/svg/149/149307.svg) no-repeat center;
    padding: 0;
    width: 38px;
    height: 30px;
}
.text_edit {
    max-width: 180px;
}
.save {
    background: url(https://image.flaticon.com/icons/svg/446/446044.svg) no-repeat center;
    width: 38px;
    height: 30px;
    padding: 0;
    margin: 0 0 0 5px;
}
.cancel {
    background: url(https://image.flaticon.com/icons/svg/748/748122.svg) no-repeat center;
    width: 38px;
    height: 30px;
    padding: 0;
    margin: 0 0 0 5px;
}

<h1 class="title">My Notes</h1>
<form>
    <input class="input_text" type="text" value="Task" placeholder="Enter your note">
    <button type="submit">Add note</button>
</form>
<ul class="note-list"></ul>

БЛОГ НА HUSL

Js Todo list help plz

Ответы (1 шт):