1

I'm a javaScript begginer. This function works and allows me to sorting list by ascendant and descendant by clicking in a button but I would like to know if it's properly written or maybe it can be simplified or written differently. Thanks in advance.

index.html

<p id="sort">Sort</p>
<ul>
  <li>Phosphorus</li>
  <li>Polonium</li>
  <li>Radium</li>
  <li>Fluorine</li>
  <li>Iron</li>
  <li>Hydrogen</li>
  <li>Germanium</li>
  <li>Mercury</li>
  <li>Actinium</li>
  <li>Barium</li>
  <li>Calcium</li>
  <li>Cadmium</li>
</ul>
<script src="main.js"></script>

main.js

const sortButton = document.querySelector("#sort");
let counter = 0;


eventListeners();

function eventListeners() {
   sortButton.addEventListener("click", sortList);
}

function sortList() {
   const elementsList = new Array();
   const elements = document.querySelectorAll("ul li");
   for (const element of elements) {
       elementsList.push(element.textContent);
   }
   const ul = document.querySelector("ul");
   ul.innerHTML = "";

   if (counter % 2 === 0) {
       const orderedList = elementsList.sort();
       for (let i = 0; i < orderedList.length; i++) {
           const li = document.createElement("li");
           li.innerHTML = orderedList[i];
           ul.appendChild(li);
       }
       counter++;
   } else {
       const orderedList = elementsList.reverse();
       for (let i = 0; i < orderedList.length; i++) {
           const li = document.createElement("li");
           li.innerHTML = orderedList[i];
           ul.appendChild(li);
       }
       counter++;
   }
}
0

1 Answer 1

2

you don't have to clear the innerHTML of the ul, nor even ever use innerHTML

element.appendChild will move existing elements - as below

const sortButton = document.querySelector("#sort");
let counter = 0;
eventListeners();

function eventListeners() {
   sortButton.addEventListener("click", sortList);
}

function sortList() {
   const elementsList = Array.from(document.querySelectorAll("ul li"));
   const ul = document.querySelector("ul");
   elementsList.sort(({textContent:a}, {textContent:b})=>(counter%2?-1:1)*a.localeCompare(b))
   .forEach(el => ul.appendChild(el));
   counter++;
}
<p id="sort">Sort</p>
<ul>
  <li>Phosphorus</li>
  <li>Polonium</li>
  <li>Radium</li>
  <li>Fluorine</li>
  <li>Iron</li>
  <li>Hydrogen</li>
  <li>Germanium</li>
  <li>Mercury</li>
  <li>Actinium</li>
  <li>Barium</li>
  <li>Calcium</li>
  <li>Cadmium</li>
</ul>

In Es2015 (i.e. old school javascirpt) - this function looks like:

function sortList() {
  var elementsList = Array.from(document.querySelectorAll("ul li"));
  var ul = document.querySelector("ul");
  elementsList.sort(function (_ref, _ref2) {
    var a = _ref.textContent;
    var b = _ref2.textContent;
    return (counter % 2 ? -1 : 1) * a.localeCompare(b);
  }).forEach(function (el) {
    return ul.appendChild(el);
  });
  counter++;
}
4
  • I'm trying to understand your function but i'm not sure what this two lines of code do: elementsList.sort(({textContent:a}, {textContent:b})=>(counter%2?-1:1)*a.localeCompare(b)) .forEach(el => ul.appendChild(el)); could you rewrite it without using arrow function?
    – Oscar VA
    Oct 11, 2020 at 1:25
  • @OscarVA - let me rewrite that in old javascript (this code is using ES6+ features) Oct 11, 2020 at 1:28
  • Sorry to ask you again. I understand the whole function except this snippet (including the asterisk): "(counter% 2? -1: 1) *". All I know is that it is a ternary conditional
    – Oscar VA
    Oct 11, 2020 at 2:49
  • it negates the output to sort ascending/descending ... multiplying the result of localeCompare (which outputs -1, 0 or 1) by 1 or -1 Oct 11, 2020 at 3:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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