我如何编写更新 function 以便我的编辑表单更新现有文本并将其替换为其他内容？

Question

尝试编写一个简单的更新 function 来更新成分并保存新的更新文本。 出于某种原因，我无法弄清楚。 提交表格后，我什么也没得到。 返回的只是我试图编辑的相同成分。

这是我的代码：

editIngredient() {
  const ingredientId = this.parentElement.dataset.id
  var editForm = 
    `<form id="edit-form">
       <input type="text" id="edit-input">
       <input type="submit" value="Edit Ingredient">
     </form>`
  this.parentElement.insertAdjacentHTML('beforeend', editForm)
  console.log(this.parentElement)
  document.getElementById('edit-form')
  editForm.addEventListener("click", updateIngredient)
}

renderIngredient(ingredientList){
  const li = document.createElement('li')
  li.dataset.id = this.recipe_id
  li.innerText = this.name
        
  const deleteBtn = document.createElement('button')
  deleteBtn.addEventListener("click", this.deleteIngredient)
  deleteBtn.innerText = "X"
  li.appendChild(deleteBtn)
  ingredientList.appendChild(li)

  const editBtn = document.createElement('button')
  editBtn.addEventListener("click", this.editIngredient)
  editBtn.innerText = "Edit"
  li.appendChild(editBtn)
  ingredientList.appendChild(li)
}

我知道我是新来的，没有受过教育，但是任何帮助或模板甚至有用的链接都会非常感激。

Answer 1

这是我制作的一个快速示例，我希望它能给您一个想法：

HTML

<ul>
  <li id="sugar">
    <label>Sugar</label>
    <button>Edit</button>
  </li>
  <li id="spice">
    <label>Spice</label>
    <button>Edit</button>
  </li>
  <li id="everything-nice">
    <label>Everything Nice</label>
    <button>Edit</button>
  </li>
</ul>

<form id="update-form">
  <input type="hidden" name="ingredientId"/>
  <input type="text" name="ingredientName"/>
  <input type="submit" id="submit" value="Update" />
</form>

在 HTML 表单中，我有三个输入字段：

1. 一个隐藏字段，用于跟踪选择要编辑的li的 ID。 您也可以利用 JavaScript 变量来跟踪这个变量。
2. 实际值的输入文本。
3. 当然还有一个输入类型提交来处理表单提交。

JavaScript

const updateForm = document.querySelector("#update-form");

// Here we attach a click event listener to all edit buttons
// with a process to set the update-form's input values.
document.querySelectorAll("li > button").forEach(el => {
  el.addEventListener('click', function(e) {
    // Get the target's parent element which is in this case is the <li>
    let parentEl = e.target.parentElement;
    updateForm["ingredientName"].value = parentEl.querySelector("label").innerText;
    updateForm["ingredientId"].value = parentEl.id;
  });
});

// Form submit process 
updateForm.addEventListener("submit", function(e) {
  // To prevent the default submit action to occur.
  e.preventDefault(); 
  
  // Get the id of the li to update.
  let elementToUpdate = document.getElementById(this["ingredientId"].value);
  // Get the updated value of the ingredientName input box.
  let updatedLabel = this["ingredientName"].value;
  // Update the li label's inner HTML with the given input value.
  elementToUpdate.querySelector("label").innerHTML = updatedLabel;
});

这是一个 CodePen 链接，可以看到它的实际效果： https://codepen.io/nikkomina/pen/MWjzygo