将创建的输入元素信息存储在 NodeList 中，然后使用 for 循环对其进行排序

Question

我想要完成的是让用户单击第一个按钮并创建一个文本字段，按下此按钮 3 次并出现 3 个文本字段。当每个文本字段出现时，用户应该在每个文本字段中输入文本。用户填写完所有文本字段后，单击第二个按钮；应按字母顺序在真正的节点列表中显示和排序手动输入的输入字段文本。

（不是数组）它必须是真实的 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 nodelist 并将每个值存储到新的 listItemValues 数组的一个元素中。

感谢任何帮助。

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

我对您的代码进行了一些更改，使其成为一个完整的 javascript 解决方案。

减少document.getElementById和document.createElement重复语法的使用。我有 2 Function Declarations:

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

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

其他更改在 Function Expression adding() 中，我在其中添加了：newInput.type = "text"; 以设置单击时的输入类型Add Item 按钮。

在 Function Expression sorting() 我已经声明：

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.

最后我创建了一个函数表达式 printSortedValues() 来打印 <p id="displayitems"></p> 中的排序值。在此函数中，使用 Array.prototype.sort() 对其值进行升序排序。

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.
};

像这样：

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>

希望这对您有所帮助。

将创建的输入元素信息存储在 NodeList 中，然后使用 for 循环对其进行排序

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

javascript

nodelist