Невозможно точно сказать по одной строке (let button = document.createElement('button');) — этой строкой вы только создаёте элемент, но ничего больше. Ниже — список самых частых причин, почему «функция сортировки не работает», и конкретные исправления/проверки. Скорее всего одна из них решит проблему.
Основные причины и решения
1) Кнопка не в DOM или обработчик не привязан
- createElement только создаёт элемент, нужно appendChild/append, иначе клик не сработает:
let button = document.createElement('button');
button.type = 'button'; // важно, если кнопка в форме — по умолчанию submit
button.textContent = 'Sort';
document.body.appendChild(button);
button.addEventListener('click', () => { /* сортировка */ });
2) Кнопка находится в форме и по клику страница отправляется (и вы думаете, что «не работает»)
- Решение: button.type = 'button' или e.preventDefault() в обработчике.
3) Неправильный comparator для Array.prototype.sort
- Частая ошибка: возвращают булево вместо числового значения. Неправильно:
arr.sort((a, b) => a > b); // возвращает true/false — даёт некорректный порядок
- Правильно:
arr.sort((a, b) => (a > b) ? 1 : (a < b) ? -1 : 0);
или для чисел:
arr.sort((a, b) => a - b);
4) Сортировка строк с числами
- Если у вас массив строк с числами, сортировка без comparator будет лексикографической:
['2','10','1'].sort() // => ['1','10','2']
- Решение:
arr.sort((a,b) => Number(a) - Number(b));
5) Сортировка массива объектов — неправильное обращение к полю
- Пример:
data.sort((x,y) => x.value - y.value); // OK если value — число
Если value — строка, используйте localeCompare:
data.sort((x,y) => x.name.localeCompare(y.name));
6) Вы сортируете NodeList/HTMLCollection напрямую
- NodeList не всегда массив. Преобразуйте:
let items = Array.from(document.querySelectorAll('li'));
items.sort(...);
затем перерисуйте DOM (удалите старые и append отсортированные).
7) Вы не обновляете DOM после сортировки
- Сортировка меняет массив, но если вы показываете элементы DOM, нужно перерисовать список.
8) Comparator не возвращает ничего (undefined)
- Если функция comparator не возвращает число, sort ничего не даст. Проверьте возвращаемое значение.
9) Ошибки в консоли/синтаксические ошибки
- Проверьте DevTools → Console. Скрипт мог упасть раньше.
Краткая инструкция для отладки
- console.log(массив) до и после sort
- console.log(typeof элементов, элементы) чтобы увидеть типы
- Проверить, добавлен ли обработчик: getEventListeners в DevTools/console
- Проверить, не отправляет ли форма данные (страница перезагружается)
Минимальный рабочий пример
let arr = [3, 1, 10, 2];
let button = document.createElement('button');
button.type = 'button'; // чтобы не сабмитить форму
button.textContent = 'Sort';
document.body.appendChild(button);
let list = document.createElement('ul');
document.body.appendChild(list);
function render() {
list.innerHTML = '';
arr.forEach(n => {
const li = document.createElement('li');
li.textContent = n;
list.appendChild(li);
});
}
render();
button.addEventListener('click', () => {
arr.sort((a, b) => a - b); // корректный числовой компаратор
render(); // обновляем DOM
});
Если это не помогло — пришлите, пожалуйста, полный фрагмент кода (HTML + JS) или опишите, что именно «не работает» (ничего не происходит / порядок неверный / консоль выдаёт ошибку и т. п.), и я помогу точечно.