Блог

Я начинающий JavaScript. Эта функция работает и позволяет мне сортировать список по восходящему и нисходящему, нажимая на кнопку, но я хотел бы знать, правильно ли она написана или, возможно, ее можно упростить или написать по-другому. Заранее спасибо.

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  ;
   }
}
  

вам не нужно очищать innerHTML от ul и даже никогда не использовать innerHTML

element.appendChild переместит существующие элементы — как показано ниже

 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>  

В Es2015 (т.Е. Старой школе javascirpt) — эта функция выглядит так:

 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  ;
}