JavaScript automatyczne numerowanie kolejnych elementów listy po kliknięciu w przycisk

pytanie zadane 23 listopada 2020 w JavaScript przez kriss_iss Nowicjusz (160 p.)

Witam,

mam zagwozdkę jak po kliknięciu w button dodawać kolejny element do listy z nazwą zakończoną liczbą kolejnego elementu - np. Item 4, Item 5, Item 6 itd.?

Poniżej zamieszczam napisany kod.

Z góry dziękuję za odpowiedzi.

Pozdrawiam.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul id="items">
        <li class="item">Item 1</li>
        <li class="item">Item 2</li>
        <li class="item">Item 3</li>
    </ul>
    <button>Add item</button>

    <script src="main.js"></script>
</body>
</html>

let addItem = function () {
    let lastElement = document.getElementById('items').lastElementChild;
    let li = document.createElement('li');
    li.setAttribute('class', 'item');
    liText = document.createTextNode('Item');
    li.appendChild(liText); 
    lastElement.appendChild(li)
}


document.querySelector('button').addEventListener('click', addItem)

1 odpowiedź

odpowiedź 23 listopada 2020 przez VBService Ekspert (256,600 p.)
wybrane 24 listopada 2020 przez kriss_iss

Najlepsza

Można np.: przez użycie metody:
document.querySelectorAll('#items li').length

    <ul id="items">
        <li class="item">Item 1</li>
        <li class="item">Item 2</li>
        <li class="item">Item 3</li>
    </ul>

czyli w Twoim przypadku ... Codepen

const addItem = function () {
    const lastElement = document.getElementById('items').lastElementChild;
    const li = document.createElement('li');
    const length = document.querySelectorAll('#items li').length + 1;
    li.setAttribute('class', 'item');
    li.innerText = `Item ${length}`; 
    lastElement.appendChild(li);
}