1

Пытаюсь разобраться с AJAX, прошу помочь. Имеется список из нескольких элементов и кнопка для добавления новых элементов в список. С помощью JS каждому элемента списка добавляется его порядковый номер.

document.addEventListener('DOMContentLoaded', function() {
    let listNumber = new List();
});

function List() {
    let btn = document.querySelector('#btn');
    let list = document.querySelector('#ul');
    let listItems = list.querySelectorAll('li');

    listCount(listItems);

    btn.addEventListener('click', function() {
        addItem('./item.html', list);
    });

    function listCount(items) {
        for(let i = 0; i < items.length; i++) {
            items[i].innerHTML = i + 1 + " " + items[i].innerHTML;
        }
    }

    function addItem(address, holder) {
        let request = new XMLHttpRequest();
        request.open('GET', address);
        request.send();
        request.addEventListener('readystatechange', function() {
            if(request.readyState == 4 && request.status == 200) {
                let newItem = request.responseText;
                holder.insertAdjacentHTML('beforeend', newItem);
            }
        });
    }
}
<ul id="ul">
  <li>Lorem</li>
  <li>ipsum</li>
  <li>dolor</li>
</ul>
<button id="btn">Add item</button>

В item.html лежит одинокий элемент li:

<li>sit</li>

Собственно вопрос: каким образом можно перевызвать функцию listNumber чтобы после AJAX запроса она заново перенумеровывала все элементы?

1 ответ 1

1
function listCount(items) {
    for(let i = 0; i < items.length; i++) {
        var span = items[i].querySelector('.number');
        if (span)
          span.textContent = i + 1 + " ";
        else
          items[i].innerHTML = "<span class='number'>" + (i + 1) + " </span>" + items[i].innerHTML;
    }
}

    ...
    request.addEventListener('readystatechange', function() {
        if(request.readyState == 4 && request.status == 200) {
            let newItem = request.responseText;
            holder.insertAdjacentHTML('beforeend', newItem);
            listCount(holder.querySelectorAll('li'));
        }
    });

Ваш ответ

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

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