0

嘿伙计们，我在这里有一些代码可以在单击按钮时动态创建文本框但是，我想通过使用 getElementByClassName 来获取文本框值，将所有“listitem”文本字段检索到一个数组中。然后我编写了一个循环查找每个元素的值（例如用户输入的内容）并将这些值放入数组中。然后对该数组进行排序。然后我将在稍后显示它们......任何帮助都非常有用！

Javascript：

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

var sortItem = function ()
{
  var myDisplayItems = "";
  myDisplayItems.innerHTML = "";

  var myClassTag = document.getElementsByClassName("listitem");
  for (index in myClassTag)
  {
    myDisplayItems += "<br>" + myClassTag[index];
  }
  //sort Array

 }
 var addItem = function()
 {
 var myToDoList = $("todolist");

  var myInput = document.createElement("input");
  myInput.setAttribute("type", "text");
  myInput.setAttribute("class", "listitem");
  myToDoList.appendChild(myInput);

  var myBr = document.createElement("br");
  myDoToList.appendChild(myBr);
 } 

 window.onload = function ()
 {
   $("additem").onclick = addItem;
   $("sortitems").onclick = sortItem;   
 }

HTML：

  <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>
4

1 回答 1

1

原代码稍作修改

HTML

<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>

Javascript

var sortItem = function(){
    var myClassTag = document.getElementsByClassName("listitem");
    //convert nodelist ot array
    myClassTag     = Array.prototype.slice.call(myClassTag, 0);
    //let the sort function sort it for you
    myClassTag.sort(function(a, b){
        return a.value > b.value ? 1 : -1;
    });

    var myToDoList = document.getElementById('todolist');
    //update items position
    update(myToDoList, myClassTag);
}
//update items position, reappending will do the job
function update(target, listOfItems){
    for(var i = 0; i < listOfItems.length; i++){
        target.appendChild(listOfItems[i]);
    }
}

var addItem = function(){
     var myToDoList = document.getElementById('todolist');
     var myInput    = document.createElement("input");

     myInput.setAttribute("type", "text");
     myInput.setAttribute("class", "listitem");
     myToDoList.appendChild(myInput);

     var myBr = document.createElement("br");
     myToDoList.appendChild(myBr);
}

window.onload = function(){
     document.getElementById('additem').addEventListener('click', addItem);
     document.getElementById('sortitems').addEventListener('click', sortItem);
}

UPD 您可以修改更新功能，使其按您的意愿工作，例如：

for(var i = 0; i < listOfItems.length; i++){
    var child = document.createElement('span');
    child.innerText = listOfItems[i].value;
    target.appendChild(child);
}
于 2013-10-29T05:28:17.380 回答