Как при нажатии кнопки отсортировать список?

Question

Список есть, кнопка есть, а функция имеет ошибку внутри, так как нажатие кнопки не сортирует.

<body>
    <input type="button" id="mybutton" value="Sort" />
    <ul id="list">
        <li>Яблого</li>
        <li>Груша</li>
        <li>Апельсин</li>
        <li>Мандарин</li>
        <li>Ананас</li>
        <li>Слива</li>
    </ul>

    <script>

        var sortID = function () {

                let list = document.querySelector("#list");

                let items = document.querySelectorAll("li"); // получаем объект NodeList (это не массив)
                let itemsArray = Array.from(items); // на основе NodeList создаем массив

                itemsArray.sort(function (a, b) {
                    if (a.textContent < b.textContent)
                        return -1;
                    if (a.textContent > b.textContent)
                        return 1;
                    return 0;
                });

                itemsArray.forEach(item => {
                    list.append(item);
                });

                window.onload = function () {
                    document.getElementById("mybutton").onclick = sortID;
                }
            }
    </script>
</body>

Answer 1

Постараюсь по простому написать, и откоментить код чтобы было понятно.

const $btn = document.querySelector('#mybutton') // Определяем нашу кнопку
const list = document.querySelector("#list"); // Наш список
const items = document.querySelectorAll("li"); // Наши элементы списка

function sortID() {
  let clearArr = []; // создаем временный массив
  
  items.forEach(function(item) {
    clearArr.push(item.innerText); // пушим ТЕКСТ каждого li элемента в временный массив
  });
  
  clearArr.sort(); // теперь сортируем
  
  list.innerHTML = '' // и чистим список в dom-e, чтобы то что мы дальше вставим не сдублировалось
  
  clearArr.forEach(item => {
    let li = document.createElement('li') // создаем новый LI
    li.innerHTML = item; // у которого ставим innerHTML равный элементу массива
    
    list.append(li) // и добавляем в старый почищенный список этот элемент
  });
}
   
$btn.onclick = sortID;

<input type="button" id="mybutton" value="Sort" />
<ul id="list">
  <li>Яблого</li>
  <li>Груша</li>
  <li>Апельсин</li>
  <li>Мандарин</li>
  <li>Ананас</li>
  <li>Слива</li>
</ul>

БЛОГ НА HUSL

Как при нажатии кнопки отсортировать список?

Ответы (1 шт):