I'm struggling with creating a straightforward update function to edit an ingredient and save the changes. Despite my efforts, I can't seem to get it right. Every time I submit the form, I just end up with the same unchanged ingredient. Here is the code snippet:
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);
}
I may be new at this and lacking in knowledge, but any assistance, example code, or useful resources would be greatly appreciated.