How do I make the items added onto the list able to be reordered? Not by using the drag and drop option.

   <form id="todoForm">
        <input type="text" id="todoInput" placeholder="Input new note..">
        <input type="text" id="description" placeholder="Input description..">
        <button type="button" id="submit" onclick="todoList()">Submit</button>
        <button type="button" id="clear" onclick="clearButton()">Clear</button>
        <button type="button" id="hide" onclick="hideButton()">Show/Hide</button>
    </form>
    <ol id="todoList">
    </ol>

function todoList() {
var item = document.getElementById("todoInput").value
var text = document.createTextNode(item)
var addItem = document.createElement("li")
addItem.appendChild(text)
document.getElementById("todoList").appendChild(addItem)

var item = document.getElementById("description").value
var text = document.createTextNode(item)
var addItem = document.createElement("p")
addItem.appendChild(text)
document.getElementById("todoList").appendChild(addItem)
document.getElementById("todoForm").reset();

CodePudding user response：

You're possibly best off by separating the data structure that holds the list's contents and the functional code that renders the list. So, have an array variable that holds the objects in the list, and a function that destroys the <ol> children and recreates them. Then you can use Array.sort https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort to sort the elements in your data structure using your required sorting parameters, and call the function to re-render the <ol> children, whenever you want.

CodePudding user response：

You can make the ol as flex container and whenever you add an item to the list, make sure you update flex order for the same. For every list item you can have an edit order button, which changes the flex order.

CodePudding user response：

Here is a slightly "reordered" script that will do the sorting of todo-tasks for you when you click on the third button "Sort":

const inp = document.getElementById("todoInput"),
  dsc = document.getElementById("description"),
  frm = document.getElementById("todoForm"),
  lst = document.getElementById("todoList");

function todoList() {
  const li = document.createElement("li");
  li.innerHTML = `${inp.value}
    <p>${dsc.value}</p>`;
  lst.appendChild(li);
  frm.reset();
}

function clearButton() {
  lst.innerHTML = "";
}

function sortList() {
  [...lst.children]
    .sort((a, b) => a.textContent.localeCompare(b.textContent))
    .forEach(el => lst.appendChild(el))
}

<form id="todoForm">
  <input type="text" id="todoInput" placeholder="Input new note..">
  <input type="text" id="description" placeholder="Input description..">
  <button type="button" id="submit" onclick="todoList()">Submit</button>
  <button type="button" id="clear" onclick="clearButton()">Clear</button>
  <button type="button" id="sort" onclick="sortList()">Sort</button>
</form>
<ol id="todoList">
</ol>

Sorting is done alphabetically with respect to the <li>'s textContent.

I took the liberty of restructuring your todoList function in several aspects:

• only <li> elements should be direct children of an <ol> list. I therefore placed the task description <p>-elements into each <li> and not under it. This will also make sure that the todoInput and the todoDescriptionwill stay together during sorting.
• instead of creating and modifying all components of the <li>s I only created each <li> element and then filled it with content by using its .innerHTML property.