JS：TODOLIST - 编辑/更新项目

Question

我是初学者..当我点击“更新”按钮时不知道如何替换新的“输入值”。

我在单击“编辑”按钮时添加“输入”。

我想在新的“输入”中写点东西，当我点击“更新”（以前是“编辑”按钮）时，我想要新的输入值。 （基本上更新项目或替换为新值）

const itemName = document.querySelector('.item_name');
const editBTN = document.querySelector('.item_edit');
const newItemInput = document.createElement('input');
editBTN.addEventListener('click', (event) => {
  console.log('dfdfdfdf');
  itemName.innerHTML = '';

  newItemInput.type = 'text';
  newItemInput.className = 'newItemInput';
  itemName.appendChild(newItemInput);
  newItemInput.focus();

  editBTN.innerText = 'Update';

  updateItem();
});

function updateItem() {
  const updatedItem = newItemInput.value;
  editBTN.addEventListener('click', () => {
    const newSpan = document.createElement('span');
    itemName.appendChild(newSpan);
  })


};

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

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

todolist：增删改查

更新项目

编辑项目

Javascript

Answer 1

由于我们将 Edit 按钮重新用作 Update 按钮，因此在事件侦听器中有一个条件来检查它的状态，通过检查其文本内容：

editBTN.addEventListener('click', (event) => {
  if (event.target.innerText === 'Update') {
    // …
  } else {
    console.log('dfdfdfdf');
    itemName.innerHTML = '';
    // …
  }
});

我们不需要

updateItem()

功能。

在真实的

if

分支：

// 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 {
    console.log('dfdfdfdf');
    itemName.innerHTML = '';

    newItemInput.type = 'text';
    newItemInput.className = 'newItemInput';
    itemName.appendChild(newItemInput);
    newItemInput.focus();

    editBTN.innerText = 'Update';
  }
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

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