(5) TodoList — обновление/редактирование элемента
Я искал это в течение 2 дней (ха-ха..). То, что я нашел, было слишком сложным для меня. Я хочу простые чистые коды. И я спросил на Stackoverflow, и АНГЕЛ ответил именно то, что я хочу!
Я чувствовал, что почти добрался до цели! но моя логика была в беспорядке, так что вообще не работала.
В любом случае, поскольку я суперпозитивный человек (смеется), я на 50% доволен тем, что пытался использовать.
Это способ использования «ванильного Javascript».
1) Когда вы нажимаете кнопку «Изменить», она устанавливается на «Обновить». Поэтому мы проверяем текстовое содержимое и позволяем прослушивателю событий устанавливать условия на основе содержимого кнопки.
editBTN.addEventListener('click', (event) => { if (event.target.innerText === 'Update') { // … } else { console.log('dfdfdfdf'); itemName.innerHTML = ''; // … } });
2) Подготовка к изменению значения тега ‹input›
2–1) Изменение исходного имени элемента на значение ‹input› нового элемента ItemName (=newItemInput)
2–2) Оставьте значение ‹input› для itemName(=newItemInput) пустым, чтобы содержимое было изменено.
2–3) Введите новое значение и нажмите кнопку «Изменить», чтобы изменить название кнопки на «Изменить».
// Set the item name to the value inside the `<input>`, removing the `<input>`. itemName.innerText = newItemInput.value; // Set the `<input>` back to empty for the next edit. newItemInput.value = ''; // Revert the Update button text back to Edit. editBTN.innerText = 'Edit';
Окончательный код!!
const itemName = document.querySelector('.item_name'); const editBTN = document.querySelector('.item_edit'); const newItemInput = document.createElement('input'); editBTN.addEventListener('click', (event) => { if (event.target.innerText === 'Update') { itemName.innerText = newItemInput.value; newItemInput.value = ''; editBTN.innerText = 'Edit'; } else { itemName.innerHTML = ''; newItemInput.type = 'text'; newItemInput.className = 'newItemInput'; itemName.appendChild(newItemInput); newItemInput.focus(); editBTN.innerText = 'Update'; } });
1) Если вы нажмете кнопку редактирования и она находится в состоянии «Обновить»
Исходный элемент (itemName) будет новым значением ItemInput (newItemInput создает новый элемент, используя createElement с тегом input)
Исходное содержимое в поле ввода исчезнет с ‘ ‘
Название кнопки снова изменится на кнопку «Изменить».
2) При нажатии кнопки редактирования статус «Обновить» меняется на «Редактировать». = Я приготовился переодеться в новый предмет!
Содержимое исходного элемента будет пустым с ‘ ‘
Тип ввода, созданный с помощью createElement, — текст, а className — newItemInput.
Добавьте новый элемент, зарегистрированный как «appendChild», к существующему элементу и установите курсор мыши в поле ввода.
— Если вы нажмете кнопку редактирования после ввода новой информации, она снова изменится на «Обновить».
<link rel="stylesheet" /> <section class="list"> <header class="header">Shopping List</header> <ul class="items"> <li class="item_row"> <div class="item"> <input type="checkbox" id="item_name_check" value="1" /> <label for="item_name_check"><span class="item_name">Egg</span></label> <div class="button_container"> <button class="item_edit">Edit</button> <button class="item_delete"> <i class="fas fa-trash-can"></i> </button> </div> </div> </li> </ul> <form class="new_form"> <footer class="footer"> <input type="text" class="footer_input" /> <button type="submit" class="footer_button"> <i class="fas fa-plus"></i> </button> </footer> </form> </section>