Question

我正在创建一个CRUD页面，用户可以在其中添加，删除和编辑文本，但是在选择文本进行编辑后，在更新文本方面存在问题。

在server = smtplib.SMTP_SSL()功能中，当我单击编辑按钮时，添加的文本将在输入字段内弹出。当我单击更新按钮（触发editText函数）时，我可以在控制台日志中看到该文本，但是相应的html未被更新。

HTML

updateText

JavaScript

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

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;
  }
}

您的代码还有其他一些问题，特别是创建具有相同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 = (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>

将选定的textContent和新值传递给更新函数时，元素文本不会更改

1 个答案: