我有一個待辦事項串列程式，用戶可以在其中輸入一個添加到串列中的專案。問題是當我點擊這些專案時，這些專案會留在待辦事項串列中，而不是被移動到完成串列中。我想要做的是在用戶單擊檢查專案已完成的專案后，將我的元素從我的待辦事項串列移至我的已完成串列。我想知道如何使用此程式接收所需的結果，該程式將單擊的元素從待辦事項串列移動到已完成串列。以下是您可以自己測驗的代碼：https : //jsfiddle.net/g60dx2e1/
// Create a "close" button and append it to each list item
var myNodelist = document.getElementsByTagName("LI");
var i;
for (i = 0; i < myNodelist.length; i ) {
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
myNodelist[i].appendChild(span);
}
// Click on a close button to hide the current list item
var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i ) {
close[i].onclick = function() {
var div = this.parentElement;
div.style.display = "none";
}
}
// Add a "checked" symbol when clicking on a list item
var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
if (ev.target.tagName === 'LI') {
ev.target.classList.toggle('checked');
}
}, false);
// Create a new list item when clicking on the "Add" button
function newElement() {
var li = document.createElement("li");
var inputValue = document.getElementById("myInput").value;
var t = document.createTextNode(inputValue);
li.appendChild(t);
if (inputValue === '') {
alert("You must write something!");
} else {
document.getElementById("myUL").appendChild(li);
}
document.getElementById("myInput").value = "";
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
li.appendChild(span);
for (i = 0; i < close.length; i ) {
close[i].onclick = function() {
var div = this.parentElement;
div.style.display = "none";
}
}
}
function newFunction() {
var todos = document.getElementById("myUL");
if (todos) {
todos.innerHTML = '';
}
}<form id="todo" style="float:left">
<h1 id="todo" style="font-family:Helvetica; color:#006600"><b>To Do</b>
<input type="text" id="myInput" placeholder="Add Item">
<span onclick="newElement()" class="addBtn">Add</span>
<input type="button" onclick="newFunction()" value="Clear">
<ul id="myUL">
</ul>
</h1>
</form>
<form id="done" style="float:right">
<h2 id="done" style="font-family:Helvetica; color:#006600"><b>Done</b>
<input type="button" onclick="NewFunction()" value="Clear"></h2>
<ul id="myUL">
</ul>
</form>uj5u.com熱心網友回復：
在串列上添加一個單擊事件以洗掉元素并將其移動到另一個串列：
document.getElementById("myUL").onclick = (e) => {
document.getElementById("myUL").removeChild(e.srcElement);
document.getElementById("myUL2").appendChild(e.srcElement);
};
注意：您有兩個帶有id="myUL". 您應該使它們與我在代碼中的不同。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/349441.html
標籤：javascript