0
내가 편집 버튼을는
을 누를 때<li>의 값으로 텍스트 입력에
<li>을 변경 걸려
이에 대한 나의 해결책은
입니다
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>https://codepen.io/hellojessicagraham/pen/Yxojqe
코드 예제/스 니펫/jsfiddle/codepen을 작성하십시오. – Dekel
@Dekel 사람들에게 제 3 자 사이트에 코드를 게시하도록 요청하지 마십시오. 이러한 링크는 시간이 지남에 따라 죽을 수 있으며 여기에있는 질문은 의미가 없습니다. Stack Overflow에는 질문에 바로 삽입 할 수있는 "Code Snippet"옵션이 있습니다. 바로 여기에서 작업 버전의 코드를 만들 수 있습니다. –
@ScottMarcus 외부 라이브러리 중 일부는 CORS로 인해 SO 코드 조각 내에서 작동하지 않으므로 때때로 jsfiddle/codepen을 사용해야합니다. – Dekel