Storing created input elements information in a NodeList then sorting it using for loop

Question

What I am trying to accomplish is have the user click button one and a text field is created, this button is pushed 3 times and 3 text fields appear. When each text field appears it should the user should then enter text in each text field. Once all text fields are filled by the user, there is a second button that when clicked; should display and sort the manually entered input fields text in a bonafide node list by alphabetical order.

(NOT AN ARRAY) it must be a true nodelist. Keep in mind, each input field is being created upon the push of button #1. Then the user entered information is being displayed and sorted when pushing button #2. A for-loop should be used to retrieve value of each element of the nodelistand store each value into an element of the new listItemValues array.

Appreciate any help.

---

javascript:

var $ = function (id) {
return document.getElementById(id)
}

var adding = function() {
  var newInput = document.createElement("input");
  var newBreak = document.createElement("br");
  var myparent = $("todolist");

  newInput.setAttribute("title", "text");
  newInput.setAttribute("class", "listitem");
  myparent.appendChild(newInput);
  myparent.appendChild(newBreak);
};

var sorting = function() {
  var display = "";
  var listItemValues = document.getElementsByTagName("input");

  for (i = 1; i <= listItemValues.length; i++)
    var myItem = $("additem") + i;
    var myItemName = (myItem).value;
    display += myItemName;
}

window.onload = function() {
  $("additem").onclick = adding;
  $("sortitems").onclick = sorting;
}

Answer 1

I have made some changes to your code to make it a completely a javascriptsolution.

To reduce the use of the repetitive syntax of document.getElementById and document.createElement. I have 2 Function Declarations:

function id(id) {
  return document.getElementById(id);
}

function ce(el) {
  return document.createElement(el);
}

Other change is in the Function Expression adding() where I've added: newInput.type = "text"; to setting the input type when you click in the Add Item button.

In the Function Expression sorting() I've declared:

nodeList = document.querySelectorAll("input[type=text]");

The document.querySelectorAll() method returns a list of the elements within the document (using depth-first pre-order traversal of the document's nodes) that match the specified group of selectors. The object returned is a NodeList.

Finally I've made a Function Expression printSortedValues() to print the sorted values in <p id="displayitems"></p>. In this function use the Array.prototype.sort() to sort its values ascending.

var printSortedValues = function(listItemValues) {
  listItemValues.sort(); // Sorting the values.

  var html = "", i, len = listItemValues.length;
  for (i = 0; i < len; i++) {
    html += "<span>";
    html += listItemValues[i];
    html += "</span>";
  }
  return html; // Return the html content with the sorted values.
};

Something like this:

function id(id) {
  return document.getElementById(id);
}

function ce(el) {
  return document.createElement(el);
}
var adding = function() {
  var newInput = ce("input"), newBreak = ce("br"), myparent = id("todolist");

  newInput.setAttribute("title", "Some title...");
  newInput.setAttribute("class", "listitem");
  newInput.type = "text";
  myparent.appendChild(newInput);
  myparent.appendChild(newBreak);
};

var sorting = function() {
  var listItemValues = [], nodeList = document.querySelectorAll("input[type=text]"), i, len = nodeList.length, node;
  for (i = 0; i < len; i++) {
    node = nodeList[i];
    listItemValues.push(node.value); // Store its values.
  }
  id("displayitems").innerHTML = printSortedValues(listItemValues);
};

var printSortedValues = function(listItemValues) {
  listItemValues.sort(); // Sorting the values.

  var html = "", i, len = listItemValues.length;
  for (i = 0; i < len; i++) {
    html += "<span>";
    html += listItemValues[i];
    html += "</span>";
  }
  return html; // Return the html content with the sorted values.
};

window.onload = function() {
  var additem = id("additem"), sortitems = id("sortitems");
  additem.onclick = adding;
  sortitems.onclick = sorting;
};

#displayitems span {
  border: solid 1px #ccc;
  border-radius: 5px;
  display: block;
  margin: 2px 0;
  padding: 4px;
}

<body>
  <h1>ToDo List - Date: <span id="today">&nbsp;</span></h1>
  <div id="todolist">
    <p>
      <input type="button" id="additem" value="Add Item">
    </p>
  </div>
  <hr>
  <div>
    <p>
      <input type="button" id="sortitems" value="Sort and Display Items">
    </p>
    <p id="displayitems"></p>
  </div>
</body>

Hope this helps.