Explore our sites

Stack Exchange
tour help careers 2.0
Take the tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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>
share|improve this question
 
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 Oct 29 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. –  user2872778 Oct 29 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 Oct 29 at 5:15
 
You are right forgot to declare as myDisplayItems = new array(); –  user2872778 Oct 29 at 6:21
add comment

1 Answer

up vote 1 down vote

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);
}
share|improve this answer
 
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 –  user2872778 Oct 29 at 15:38
 
@user2872778 see update –  Dart Oct 30 at 0:38
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.