javascript - 将选定的 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) {
  const currentText = e.target.parentNode.firstChild;
  const 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;
  }
}

您的代码还有一些其他问题，特别是创建具有相同 ID 的多个元素(格式不正确，并且在您添加其他功能时可能会出现问题)。以下是解决该问题以及简化某些功能和修复搜索的片段。

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 = (event) => {
  if (items) {
    const s = event.currentTarget.value.toLowerCase();
    for (const item of items) {
      if (item.firstChild.textContent.toLowerCase().indexOf(s) !== -1) {
        item.style.display = 'block';
      } else {
        item.style.display = 'none';
      }
    }
  }
};

const deleteItem = (event) => {
  currentItem = null;
  event.currentTarget.parentNode.remove();
};

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

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

const addItem = () => {
  let val = input.value
  if (val) {
    const 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>