Unable to sort div Elements using javascript

Question

This is the HTML elements which i am trying to sort

    <div id="notStarted-tasks">
  <div id="K1512844566066" class="row">
    <div class="span4 offset4 alert alert-warning" style="margin: auto; display: table;"><span style="font-size: 170%">Breakfast</span>
      <button href="#" type="button" class="btn btn-warning">Start</button>
    </div>
  </div>
  <div id="I1512844569230" class="row">
    <div class="span4 offset4 alert alert-warning" style="margin: auto; display: table;"><span style="font-size: 170%">dinner</span>
      <button href="#" type="button" class="btn btn-warning">Start</button>
    </div>
  </div>
</div>

And this is my sort function in javascript, in the first "if" block i am just returning if the list is empty. In the second "if" i am doing a descending sort and in the "else" ascending sort.

const todoSort = () =>{
    if(notStartedElement.length==0)
            return;
    if(todoCurrent=="asc"){
        document.getElementById("todoSort").setAttribute("src","src/image/desc.png");
        todoCurrent="desc";
        const ele = document.getElementById("notStarted-tasks");
        const divEle = ele.getElementsByClassName("row");
        divEle.sort(function(a,b){
            let spana = a.getElementsByTagName("span")[0];
            let spanb = b.getElementsByTagName("span")[0];
            return spana.innerHTML == spanb.innerHTML? 0 : (spana.innerHTML > spanb.innerHTML ? -1 : 1);
        });
        ele.innerHTML="";
        for(let i = 0;i<divEle.length;i++)
            ele.appendChild(divEle[i]);
    }
    else{
        document.getElementById("todoSort").setAttribute("src","src/image/asc.png");
        todoCurrent="asc";
        const ele = document.getElementById("notStarted-tasks");
        const divEle = ele.getElementsByClassName("row");
        divEle.sort(function(a,b){
            let spana = a.getElementsByTagName("span")[0];
            let spanb = b.getElementsByTagName("span")[0];
            return spana.innerHTML == spanb.innerHTML? 0 : (spana.innerHTML > spanb.innerHTML ? 1 : -1);
        });
        ele.innerHTML="";
        for(let i = 0;i<divEle.length;i++)
            ele.appendChild(divEle[i]);
    }
}

When i click on my sort button i get this message "Uncaught TypeError: divEle.sort is not a function". And i need this to be done only in javascript and i am not allowed to use jquery. So, can anybody point me out what am i doing wrong here ? Thank you

Jonas Äppelgran · Accepted Answer · 2017-12-09 19:06:12Z

1

getElementsByClassName returns a HTMLCollection and you need a Array to use sort.

You can easily make it into an array like this:

var collection = document.getElementsByClassName("some-class");
var array = [];
for (var x = 0; x < collection.length; x++) {
    array.push(collection[x]);
}
array.sort(...);

answered Dec 9, 2017 at 19:06

Jonas Äppelgran

2,74729 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Unable to sort div Elements using javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related