0

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

<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>
1
  • Почему бы не воспользоваться отладкой и посмотреть что не так "внутри"? 12 дек 2021 в 16:37

1 ответ 1

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.