如何解决如何编写更新函数,以便我的编辑表单更新现有文本并将其替换为其他内容?
尝试编写一个简单的更新函数来更新成分并保存新的更新文本。出于某种原因,我无法弄清楚。提交表单后,我什么也没得到。返回了我试图编辑的相同成分。
这是我的代码:
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)
}
我知道我是新手并且没有受过教育,但任何帮助或模板甚至有用的链接都将不胜感激。
解决方法
这是我制作的一个快速示例,希望能给您一个想法:
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 表单中,我有三个输入字段:
- 一个隐藏字段,用于跟踪被选中进行编辑的
li
的 ID。 您也可以利用 JavaScript 变量来跟踪这个变量。 - 实际值的输入文本。
- 当然还有一个输入类型 submit 来处理表单提交。
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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。