I am wanting to change an <li> to a text input with the value of the <li> when an edit button is pressed
My solution for this is
let taskList = document.querySelector("#taskList");
const addTaskInput = document.querySelector("#addTaskInput");
const addTaskButton = document.querySelector("#addTaskButton");
const addTask = () => {
if (addTaskInput.value != " ") {
let taskItem = document.createElement("li");
taskItem.textContent = addTaskInput.value;
let checkBox = document.createElement("input");
checkBox.setAttribute("type", "checkBox");
let removeItem = document.createElement("button");
removeItem.setAttribute("class", "remove");
removeItem.textContent = "Delete";
let editItem = document.createElement("button");
editItem.textContent = "Edit"
editItem.setAttribute("class", "edit");
taskList.appendChild(taskItem);
taskItem.appendChild(checkBox);
taskItem.appendChild(removeItem);
taskItem.appendChild(editItem);
addTaskInput.value = " ";
};
}
addTaskButton.addEventListener("click", addTask);
// const checkbox = document.querySelector("input").addEventListener('change', () => {
// if (checkbox.checked == true) {
// console.log("check test");
// } else {
// console.log("not working");
// }
// });
addTaskInput.addEventListener("keydown", (event) => {
if (event.keyCode == 13) {
addTask();
}
});
taskList.addEventListener("click", (event) => {
if(event.target.tagName == "BUTTON") {
if (event.target.className == "remove") {
let taskItem = event.target.parentNode;
taskList = taskItem.parentNode;
taskList.removeChild(taskItem);
} else if (event.target.className == "edit") {
event.target.setAttribute("class", "done");
let taskItem = event.target.parentNode;
taskList = taskItem.parentNode;
let editMode = document.createElement("input");
editMode.setAttribute("type", "text");
editMode.setAttribute("value", taskItem.textContent);
taskList.replaceChild(taskItem, editMode);
}
}
});html {
box-sizing: border-box;
}
*, *::after, *::before {
box-sizing: inherit;
}
* {
box-sizing: border-box;
font-family: sans-serif;
}
.wrapper {
width: 300px;
min-height: 300px;
border: 2px solid #000;
margin: 1rem auto;
padding: 1rem;
word-wrap: break-word;
position: relative;
}
ul {
padding-left: 0;
margin-left: 0;
}
ul li {
width: 100%;
padding: 1rem .25rem;
list-style: none;
border-bottom: 1px solid black;
}
ul li button {
width: 30%;
float: right;
border: none;
margin-right: .5rem;
background: none;
font-size: .75rem;
transition: background-color 0.5s ease;
-webkit-transition: color 0.5s ease;
color: #000;
}
ul li button:hover {
color: #777;
}
ul li input {
float: right;
}
#addTaskButton {
background: #fff;
border: .5px solid black;
margin: 1rem;
max-width: 100%;
height: 2rem;
border-radius: none;
transition: background-color 0.5s ease;
-webkit-transition: background-color 0.5s ease;
background-color: #fff;
}
#addTaskButton:hover {
background-color: #e7e7e7;
}<body>
<div class="wrapper">
<ul id="taskList">
</ul>
<div id="add-task-area">
<input type="text" id="addTaskInput" value="">
<button id="addTaskButton">Add Task</button>
</div>
</div>
</body>Essentially rebuilding the element and using the textContent as the value
(will add the changes to the <li> after solving this problem.
This solution doesn't work. Is this not how replaceChild works? Also there must be a less verbose way of implementing this?
JavaScript only please, also can you please explain any answers or feedback
Reverse arguments of replaceChild. First argument is new node and second argument is old node which needs to be replaced.