Question

如何向任务列表添加更多输入选项，例如任务描述，并在单击添加按钮后显示它们？我尝试使用新变量创建一个新函数，即函数 taskDescr、var taskDescr 而不是 var newItem，并更改代码以反映新变量，但它没有产生预期的效果。感谢您提供的任何指导或帮助。

请参阅小提琴链接：https://jsfiddle.net/hufflepuff_hamlet/r9uogxwL/2/

<body>
  <h1>To Do List Sortable</h1>
  <div class="adder">
    <input type="text" class="input" placeholder="Add tasks to your list..."/>
    <input type="text" class="input2" placeholder="Task description..."/>


    <span class="add">+</span>
  </div>
  <ul>
    <li class="draggable" draggable="true">Task 1</li>
    <li class="draggable" draggable="true">Task 2</li>
    <!--<li class="draggable" draggable="true">Task 3</li>
    <li class="draggable" draggable="true">Task 4</li>
    <li class="draggable" draggable="true">Task 5</li>-->
  </ul>

  <script src="script.js"></script>
</body>

function addNewItem() {
  var newItem = document.querySelector('.input').value;
  if (newItem != '') {
    document.querySelector('.input').value = '';
    var li = document.createElement('li');
    var attr = document.createAttribute('draggable');
    var ul = document.querySelector('ul');
    li.className = 'draggable';
    attr.value = 'true';
    li.setAttributeNode(attr);
    li.appendChild(document.createTextNode(newItem));
    ul.appendChild(li);
    addEventsDragAndDrop(li);
  }
}

btn.addEventListener('click', addNewItem);

如何将新的输入选项添加到可拖动的可排序 Javascript 待办事项列表？

0 个答案: