JavaScript Taking in values from text box store into an array create new array to sort

Question

Hey guys i have some code here that dynamically creates text boxes when a button is clicked however, i would like to take in the text box values by using getElementByClassName, Retrieve all of the "listitem" text fields into an array.Then I code a loop to find the values of each of those elements (ex. what the user entered) and put those values in an array. Then sort that array. I will then display them later on... Any help is appericated!

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>

It seems like you described the answer in the question. Use getElementsByClassName, then loop through the values. If you have an implementation that doesn't work, you should post that code, and we could help. — Evan
– Evan, Commented Oct 29, 2013 at 3:47
When i click the button to sort the array i get an error saying that the "myDisplayItems.sort()" is not a function that is why i commented out the line. — king_sw4
– king_sw4, Commented Oct 29, 2013 at 4:57
That's because myDisplayItems is not an array, it's a string. You can learn about arrays here: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — Evan
– Evan, Commented Oct 29, 2013 at 5:15
You are right forgot to declare as myDisplayItems = new array(); — king_sw4
– king_sw4, Commented Oct 29, 2013 at 6:21

Dart · Accepted Answer · 2013-10-30 00:38:22Z

A bit modified original code

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 You can modify update function, to make it works as you wanted, ex:

for(var i = 0; i < listOfItems.length; i++){
    var child = document.createElement('span');
    child.innerText = listOfItems[i].value;
    target.appendChild(child);
}

This works, but i don't need the text boxes to be re-arranged. I will display the sorted array beneath the sort and display button using the DOM methods and properties after the array gets sorted. thanks anyways. @Dart

Collectives™ on Stack Overflow

JavaScript Taking in values from text box store into an array create new array to sort

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related