Блог

У меня есть 3

 <ul id = "friends">
            
    <li>Zvonar</li>
    <li>Ivan</li>
    <li>Petro</li>

</ul>
  

 let list = document.getElementsByTagName('li');

                
for (let i = 0; i < list.length; i  ) {

    for (let j = 0; j < list.length; j  ) {

        if (list[j].textContent > list[j   1].textContent) {

            buf = list[j].textContent;
            list[j] = list[j   1].textContent;
            list[j   1] = buf;
        }
    }
}
  

Вы ссылаетесь на индекс массива, который не существует. Список начинается с индекса 0-2, поэтому на последней итерации оператор if прервется, потому что вы выполняете 2 1 = list[3] . Но у массива нет этого индекса. Поскольку это последний индекс массива, и этот индекс уже был сверен с индексом n-1, нет причин проверять его. Итак, я думаю, вы можете изменить свой цикл на:

 for (let j = 0; j < list.length-1; j  ) {...
  

Я не тестировал это, но я думаю, что это решит вашу проблему

Когда вы находитесь на последнем индексе, вы добавляете один, чтобы получить следующий, и там ничего нет.

Лично я бы не стал менять местами текст. Я бы передал массив элементов.

 const bubbleSortText = function(arr) {
  const len = arr.length;
  for (let i = 0; i < len; i  ) {
    for (let j = 0; j < len - 1; j  ) {
      if (arr[j].innerText.localeCompare(arr[j   1].innerText) === 1) {
        const tmp = arr[j];
        arr[j] = arr[j   1];
        arr[j   1] = tmp;
      }
    }
  }
  return arr;
};

const ul = document.querySelector('#friends');
const lis = Array.from(document.querySelectorAll('#friends li'));
const newOrder = bubbleSortText(lis);
newOrder.forEach(function (li) {
  ul.appendChild(li);
});  

 <ul id="friends">
  <li>Zvonar</li>
  <li>Ivan</li>
  <li>Petro</li>
</ul>  

 let list = document.getElementsByTagName('li');
let arr = Array.from(list);
arr.sort((a, b) => a.innerText > b.innerText ? 1 : a.innerText < b.innerText ? -1 : 0)