Текст элемента не изменяется при передаче выбранного textContent и нового значения в функцию обновления

Question

Я создаю страницу CRUD, где пользователь может добавлять, удалять и редактировать текст, но у меня есть проблема с обновлением текста после того, как я выбрал его для редактирования.

В editText функция, когда янажмите кнопку редактирования. Добавленный текст появится в поле ввода.Когда я нажимаю кнопку обновления (вызывая функцию updateText), я вижу текст в журнале консоли, но соответствующий HTML-код не обновляется.

HTML

<div class="main">
  <form>
    <input type="text" placeholder="search">
  </form>
  <ul></ul>
  <div>
    <input class="add-text" type="text" placeholder="Add Text">
    <button id="add">Add</button>
    <button id="update">update</button>
  </div>
</div>

Javascript

const inputsearch = document.querySelector('form input');
const addInputBtn = document.querySelector('#add');
const update = document.querySelector('#update');

addInputBtn.addEventListener('click', addtext);

function addtext(){
  let li = document.createElement('li');
  let inputadd = document.querySelector('.add-text');
  let addedtext = inputadd.value;
  let h1Tag = '<h1 id="text">'+addedtext+'</h1>';
  let tags = h1Tag + '<button id="delete">Delete</button><button id="edit">Edit</button>';

  if(addedtext == ''){
    alert('please add some text');
    return;
  }else{
    li.innerHTML = tags;
    document.querySelector('ul').appendChild(li);
  }
  li.querySelectorAll('#delete')[0].addEventListener('click', deleteText);
  li.querySelectorAll('#edit')[0].addEventListener('click', editText);
  getlist(li, h1Tag);
  inputadd.value = '';
}


function deleteText(e) {
  e.target.parentNode.remove();
  document.querySelector('.add-text').value = '';
}

function editText(e) {
  let currentText = e.target.parentNode.firstChild.textContent;
  let currentValue = document.querySelector('.add-text');
  currentValue.value = currentText;
  getupdate(currentText, currentValue);

}

function getupdate(currentText, currentValue) {
  update.addEventListener('click', updateText);
  function updateText() {
    currentText = currentValue.value
    console.log(currentText = currentValue.value);
  }
}


function getlist(li, h1Tag) {
inputsearch.addEventListener('keyup', serchText);

  function serchText(e) {
    let typetext = e.target.value.toLowerCase();
    if(h1Tag.toLowerCase().indexOf(typetext) != -1){
      li.style.display = 'block';
    }else{
      li.style.display = 'none';
    }
  }
}

Answer 1

Чтобы решить проблему, не меняя общий подход, при нажатии кнопки редактирования необходимо получить соответствующий элемент (а не только его textContent) и передать его функции getupdate(), которая будет обновляться при нажатии кнопки обновления.Относительно небольшие изменения в ваших текущих функциях:

function editText(e) {
  let currentText = e.target.parentNode.firstChild;
  let currentValue = document.querySelector('.add-text');
  currentValue.value = currentText.textContent;
  getupdate(currentText, currentValue);
}

function getupdate(currentText, currentValue) {
  update.addEventListener('click', updateText);
  function updateText() {
    currentText.textContent = currentValue.value;
  }
}

Есть некоторые другие проблемы с вашим кодом, в частности, создание нескольких элементов с одинаковым идентификатором (который искажен и, вероятно, станет проблематичным, когда вы добавите дополнительные функции).Ниже приведен фрагмент, который решает эту проблему, а также упрощает некоторые из ваших функций и исправляет поиск.

const search = document.querySelector('form input');
const input = document.querySelector('.add-text');
const container = document.querySelector('ul');
let items = null;
let currentItem = null;

const searchItems = (e) => {
  if (items) {
    let s = e.target.value.toLowerCase();
    for (let item of items) {
      if (item.firstChild.textContent.toLowerCase().indexOf(s) !== -1) {
        item.style.display = 'block';
      } else {
        item.style.display = 'none';
      }
    }
  }
}

const deleteItem = (e) => {
  currentItem = null;
  e.target.parentNode.remove();
}

const editItem = (e) => {
  currentItem = e.target.parentNode.firstChild;
  input.value = currentItem.textContent;
}

const updateItem = (e) => {
  if (currentItem) {
    currentItem.textContent = input.value;
  }
}

const addItem = () => {
  let val = input.value
  if (val) {
    let li = document.createElement('li');
    let inner = '<h1 class="text">' + val + '</h1>';
    inner += '<button class="delete">Delete</button>';
    inner += '<button class="edit">Edit</button>';
    li.innerHTML = inner;
    container.appendChild(li);
    val = '';
    currentItem = li.firstChild;
    items = document.querySelectorAll('li');
    for (let del of document.querySelectorAll('.delete')) {
      del.addEventListener('click', deleteItem);
    }
    for (let edit of document.querySelectorAll('.edit')) {
      edit.addEventListener('click', editItem);
    }
  } else {
    alert('please add some text');
    return;
  }
}

search.addEventListener('keyup', searchItems);
document.querySelector('#add').addEventListener('click', addItem);
document.querySelector('#update').addEventListener('click', updateItem);

<div class="main">
  <form>
    <input type="text" placeholder="Search">
  </form>
  <ul></ul>
  <div>
    <input class="add-text" type="text" placeholder="Add Text">
    <button id="add">Add</button>
    <button id="update">Update</button>
  </div>
</div>