javascript JS：TODOLIST -编辑/更新项目

jvidinwx 于 2023-05-16 发布在 Java

关注(0)|答案(1)|浏览(112)

我是初学者。不知道如何替换新的'输入值'，当我点击'更新'按钮。
当我点击“编辑”按钮时，我添加了“输入”。
我想在新的“输入”中写一些东西，当我点击“更新（以前的“编辑”按钮）”时，我想得到新的输入值。（基本上更新项目或替换为新值）

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：CRUD
更新项目
编辑项目
简体中文

JavaScript

来源：https://stackoverflow.com/questions/76245045/js-todolist-edit-update-item

1条答案

按热度按时间

myzjeezk1#

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

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

我们不需要updateItem()函数。
在truthy 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>

赞(0）回复(0）举报 2023-05-16

我来回答

javascript JS：TODOLIST -编辑/更新项目

1条答案

相关问题

热门标签

最新问答