(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>