如何移动创建的内容<div1>成一个<div2>不移动整体<div1>并不断创造元素<div1> ?</div1></div1></div2></div1>
[英]How to move the created content of a <div1> into a <div2> without moving the whole <div1> and keep creating elements in <div1>?
问题描述
total JS newbie here, I'm trying to code a to do list with vanilla JS/Html in which elements from "To Do" can end up in "Done" when clicked.
总 JS 新手在这里，我正在尝试使用 vanilla JS/Html 编写一个待办事项列表，其中“待办事项”中的元素在单击时可以以“完成”结尾。 I have made my icons clickable, I have managed to move content from one div to the other, but I have several issues and i can't seem to find the problem lies:我已经使我的图标可点击，我已经设法将内容从一个 div 移动到另一个，但我有几个问题，我似乎无法找到问题所在：
1: why does my JS script move my whole 'doList' div into my 'doneList' div when I (thought I) asked for it to move the <li id=todotask> only? 1：当我（以为我）要求它仅移动<li id=todotask>时，为什么我的 JS 脚本将我的整个 'doList' div 移动到我的 'doneList' div 中？ is it a parent problem?是父母的问题吗？ (line 24) EDIT: SOLVED （第 24 行）编辑：已解决
2: how on earth do I manage to move only ONE <li> element, the one I click, and not the others? 2：我到底是如何设法只移动一个<li>元素，即我点击的那个，而不是其他的？ Right now they all get the same ID upon appearing so i guess that's going to be a problem, so... EDIT:SOLVED现在他们在出现时都会得到相同的 ID，所以我想这将是一个问题，所以...... 编辑：已解决
3: is there a way I can give every <li> a different ID and change the moved <li> element's ID after I click it? 3：有没有办法可以给每个<li>一个不同的 ID，并在我点击后更改移动的<li>元素的 ID？
4: when I finally get my <li> element in the right div after click, how can I "restart" my function so the next <li> element I put in my input appears in "todo" and not in "done" after the one I moved? 4：当我最终在点击后在正确的 div 中获得<li>元素时，如何“重新启动”我的 function 所以我输入的下一个<li>元素出现在“todo”中，而不是“done”中我搬的那个？
Here is what I've read and tried so far: changing the parent and the child in my moveItem function, give an ID to my <li> elements upon creation, removing and adding an ID using li.id and classList.remove/add, read at least 50 SO answers on how to move divs into one another but didn't find anything that would fit my need, since I want to move a.createElement created <li> onclick and be done with it, not have a div move by itself, move elemenets that are already in my html or fuse content of two divs...这是我到目前为止阅读和尝试过的内容：更改我的 moveItem function 中的父项和子项，在创建时为我的<li>元素提供一个 ID，使用 li.id 和 classList.remove/add 删除和添加一个 ID ，阅读至少 50 个关于如何将 div 相互移动但没有找到任何适合我需要的答案，因为我想移动 a.createElement created <li> onclick 并完成它，没有 div自行移动，移动已经在我的 html 中的元素或融合两个 div 的内容...
here is my JS code, I hope you can read through what I'm trying to achieve here, it's my very first post, very first contact with JS and code, plus I'm french and don't have all the vocabulary yet, please bear with me...这是我的 JS 代码，我希望你能通读我在这里尝试实现的目标，这是我的第一篇文章，第一次接触 JS 和代码，另外我是法国人，还没有所有的词汇，请多多包涵...
here is my code:这是我的代码：
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>
here is what it shows on my inspector before and after I move my elements:这是它在我移动元素之前和之后在我的检查器上显示的内容：
before:前：
after:后：
I hope I don't waste your time and you'll lend a newbie-tolerant hand my way, thanks a lot!我希望我不会浪费您的时间，并且您会以我的方式帮助新手，非常感谢！
1 个解决方案
解决方案1
0 已采纳 2020-08-18 16:06:44
In moveItem , this is the ul .在moveItem中， this是ul 。 So you should be moving this , not this.parentElement .所以你应该移动this ，而不是this.parentElement 。
Also, doList or doneList will be the parent of the element, not the grandparent, so you need to change the condition in the ternary expression.此外， doList或doneList将是元素的父元素，而不是祖父元素，因此您需要更改三元表达式中的条件。
And the destination when moving back should be doList , todotask is the ID of a specific task.而后退时的目的地应该是doList ， todotask是特定任务的ID。 You also shouldn't create duplicate IDs like that.您也不应该像这样创建重复的 ID。 There's no need to give an ID to the tasks that are created dynamically.无需为动态创建的任务提供 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.