CODEWITHSUNDEEP
javascripthtml
Zaq
Zaq

Reputation: 35

Trying to sort a list in my html with javascript

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

Upvotes: 1

Views: 80

Answers (3)

sk8terboi87 ツ
sk8terboi87 ツ

Reputation: 3457

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>

Upvotes: 1

Jaromanda X
Jaromanda X

Reputation: 1

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="#">

Upvotes: 1

Shubham Khatri
Shubham Khatri

Reputation: 281854

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>

Upvotes: 2

Related Questions