Question

我想在按下编辑按钮时将<li>更改为<li>的值的文本输入

我的解决方案是

＆＃13;

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);
        }
    }
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

基本上重建元素并使用textContent作为值（在解决此问题后，会将更改添加到<li>。这个解决方案不起作用。这不是replaceChild的工作原理吗？还有一个不那么冗长的实现方式吗？只有JavaScript，请您解释任何答案或反馈

https://codepen.io/hellojessicagraham/pen/Yxojqe

Answer 1

replaceChild的反向参数。第一个参数是新节点，第二个参数是需要替换的旧节点。

taskList.replaceChild(editMode,taskItem)

单击按钮时将`li`更改为输入

1 个答案: