Trying to sort a list in my html with javascript

Question

im having a bit of trouble with the code below:

Html:

<p>click to <a onclick ="sortList(); return false;" href="#">sort</a></p>
<ul id="fruits">
  <li>apple</li>
  <li>orange</li>
  <li>banana</li>
</ul>

Javascript:

function sortList(listId) {
    var list = document.getElementbyId(listId);
    var children = list.childNodes;

    var listItemsHTML = new Array();
    for (var i = 0; i < children.length; i++) {
        if (children[i].nodeName === "LI") {
            listItemsHTML.push(children[i].innerHTML);
        }
    }
    listItemsHTML.sort();
    list.innerHTML="";
    for (var i = 0; i < listItemsHTML.length; i++) {
        list.innerHTML += "<li>" + listItemsHTML[i] + "</li>";
    }
}

however, when i try and click the link to sort the html does nothing and im not sure what the problem is. i am referencing and was able to use changeit and echo function to produce an alert message in the .js file just cant sort

You aren't passing in the required listId argument to sortList. Try onclick="sortList('fruits')". Also, next time, look in your error console — Phil
– Phil, Commented Apr 12, 2017 at 4:43
Also also, be wary of childNodes; it will include whitespace as textnodes (though I see you are checking node names so that's good) — Phil
– Phil, Commented Apr 12, 2017 at 4:44
first up ... document.getElementbyId will fail ... it's document.getElementById — Jaromanda X
– Jaromanda X, Commented Apr 12, 2017 at 4:47
Thank you, phil. that was the main problem and had a minor problem in the .js which i found through the error console. just passed my mind to look in there — Zaq
– Zaq, Commented Apr 12, 2017 at 4:47

Shubham Khatri · Accepted Answer · 2017-04-12 04:45:11Z

You need to pass the listId to the function as an argument like onclick ="sortList('fruits'); return false;" and change document.getElementbyId() to document.getElementById() which is a typo

function sortList(listId) {
    var list = document.getElementById(listId);
    var children = list.childNodes;

    var listItemsHTML = new Array();
    for (var i = 0; i < children.length; i++) {
        if (children[i].nodeName === "LI") {
            listItemsHTML.push(children[i].innerHTML);
        }
    }
    console.log(listItemsHTML);
    listItemsHTML.sort();
    list.innerHTML="";
    for (var i = 0; i < listItemsHTML.length; i++) {
        list.innerHTML += "<li>" + listItemsHTML[i] + "</li>";
    }
}

<p>click to <a onclick ="sortList('fruits'); return false;" href="#">sort</a></p>
          <ul id="fruits">
          <li>apple</li>
          <li>orange</li>
          <li>banana</li>
          </ul>

Jaromanda X · Accepted Answer · 2017-04-12 04:49:51Z

Firstly, it's document.getElementById ... capital B in ById

Secondly, use list.children rather than list.childNodes - don't need to care about text nodes

Thirdly, use list.appendChild on a sorted list to move the existing nodes, rather than mucking around with innerHTML

function sortList(listId) {
    var list = document.getElementById(listId);
    Array.from(list.children).sort((a, b) => a.textContent > b.textContent).forEach(li => list.appendChild(li));
}

Or, if you're not comfortable with ES2015+

function sortList(listId) {
    var list = document.getElementById(listId);
    Array.from(list.children).sort(function (a, b) {
        return a.textContent > b.textContent;
    }).forEach(function (li) {
        return list.appendChild(li);
    });
}

and finally, change

<a onclick ="sortList(); return false;" href="#">

to

<a onclick ="sortList('fruits'); return false;" href="#">

sk8terboi87 ツ · Accepted Answer · 2017-04-12 05:04:14Z

I know its already answered, but of thought of providing little different version.

Use buttons instead of <a>, Using 'href='#' is not a good practice.
Never create a element from string. Always use document.createElement. Its better!
Write a separate listener for triggering functions. Don't write in HTML itself. It will be harder to manage once application grows.

HTML

<p>click to <button class="sort">sort</button></p>
<ul id="fruits">
  <li>apple</li>
  <li>orange</li>
  <li>banana</li>
</ul>

JavaScript

<script type="text/javascript">
    function sortList() {
        var fruitCollection = [],
            fruitsDOM = document.querySelector('#fruits'),
            fruitsLists = document.querySelectorAll('li');

        fruitsLists.forEach(function(item) {
            fruitCollection.push(item.textContent);
        });
        fruitCollection.sort();
        fruitsDOM.innerHTML = null;
        fruitCollection.forEach(function(item) {
            var newNode = document.createElement('li');
            newNode.textContent = item;
            fruitsDOM.appendChild(newNode);
        });
    }
    document.querySelector('.sort').addEventListener('click', sortList);
</script>

Collectives™ on Stack Overflow

Trying to sort a list in my html with javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related