如何解决如何将<div1>的已创建内容移动到<div2>而又不移动整个<div1>并继续在<div1>中创建元素？
这里是JS新手，我正在尝试使用香草JS / HTML编写一个待办事项列表，其中单击“待办事项”中的元素可以将其结尾为“完成”。我已经使图标可点击，我设法将内容从一个div移到另一个div，但是我遇到了几个问题，而且我似乎找不到问题所在：
1：为什么当我（我认为）要求它仅移动<li id=todotask>时，我的JS脚本为什么将整个'doList'div移到'doneList'div中？这是父母的问题吗？ （第24行）编辑：已解决
2：我到底如何只移动一个<li>元素，我单击的元素，而不移动其他元素？现在它们出现时都获得相同的ID，所以我想这将是一个问题，所以...编辑：已解决
3：有没有办法给每个<li>赋予不同的ID，并在单击后更改已移动的<li>元素的ID？
4：当我单击鼠标后终于在正确的div中获得<li>元素时，如何“重新启动”函数，以便输入的下一个<li>元素出现在“ todo”中而不是在我搬家之后“完成”？
这是到目前为止我已经阅读和尝试的内容：在我的moveItem函数中更改父项和子项，在创建<li>元素时给它一个ID，使用li.id和classList.remove / add，阅读至少50条关于如何将div相互移动的答案，但是没有找到任何符合我需要的内容，因为我想移动创建的<li> onclick并完成有了它，本身没有div移动，移动我的html中已经存在的元素或融合两个div的内容...
这是我的JS代码，我希望您可以通读我在这里想要实现的目标，这是我的第一篇文章，与JS和代码的第一次接触，再加上我是法语，并且没有全部词汇呢，请忍受...
这是我的代码：
function newItem() {
console.log("Inside newItem")
//set variables
let item = document.getElementById("taskinput").value;
let ul = document.getElementById('doList');
let li = document.createElement('li');
li.id = 'todotask';
// now put text in list item
li.appendChild(document.createTextNode(item));
ul.appendChild(li); // put list item in our unordered list
document.getElementById("taskinput").value = ""; // erase what is currently in todo
li.onclick = moveItem; // run moveItem when the li is clicked
}
function moveItem(e) {
var moveTo = this.parentElement.parentElement == doneList ? todotask : doneList;
moveTo.appendChild(this.parentElement);
console.log("Item Moved to Done")
}
document.body.onkeyup = function(e) {
let item = document.getElementById("taskinput").value;
if (e.keyCode == 13) {
console.log('enter pressed!');
newItem();
console.log(item);
};
};
document.getElementById('addtask').onclick = function() {
console.log('Add button pressed!')
newItem()
}<body>
<div class="container">
<div>
<h1>To Do List</h1>
</div>
<div id="addtaskbar">
<input type="text" name="taskinput" id="taskinput" placeholder="What do you have to do next?">
<input type="button" name="addtask" id="addtask" value="Add">
</div>
</div>
<div class="container">
<div id="todo">
<ul id='doList'>
</ul>
</div>
<div id="done">
<ul id='doneList'>
</ul>
</div>
</div>在移动元素前后，它在检查器上显示的内容是
之前：
之后：
我希望我不要浪费你的时间，你会以我的方式向新手伸出援助之手，谢谢！！
解决方法
在moveItem中，this是ul。因此，您应该移动this，而不是this.parentElement。
此外，doList或doneList将是元素的父级，而不是祖父母，因此您需要在三元表达式中更改条件。
后退时的目的地应该为doList，todotask是特定任务的ID。您也不应该那样创建重复的ID。无需为动态创建的任务提供ID。
function newItem() {
console.log("Inside newItem")
//set variables
let item = document.getElementById("taskinput").value;
let ul = document.getElementById('doList');
let li = document.createElement('li');
// now put text in list item
li.appendChild(document.createTextNode(item));
ul.appendChild(li); // put list item in our unordered list
document.getElementById("taskinput").value = ""; // erase what is currently in todo
li.onclick = moveItem; // run moveItem when the li is clicked
}
function moveItem(e) {
var moveTo = this.parentElement == doneList ? doList : doneList;
moveTo.appendChild(this);
console.log("Item Moved to " + (moveTo == doneList ? "Done" : "ToDo"))
}
document.body.onkeyup = function(e) {
let item = document.getElementById("taskinput").value;
if (e.keyCode == 13) {
console.log('enter pressed!');
newItem();
console.log(item);
};
};
document.getElementById('addtask').onclick = function() {
console.log('Add button pressed!')
newItem()
}<body>
<div class="container">
<div>
<h1>To Do List</h1>
</div>
<div id="addtaskbar">
<input type="text" name="taskinput" id="taskinput" placeholder="What do you have to do next?">
<input type="button" name="addtask" id="addtask" value="Add">
</div>
</div>
<div class="container">
To Do
<div id="todo">
<ul id='doList'>
</ul>
</div>
Done:
<div id="done">
<ul id='doneList'>
</ul>
</div>
</div>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。