【javascript】Todoリストの連番作成について

javascriptで、Todoリストを作成しています。
Taskを追加した際に、自動で連番になるように実装したいのですが、わかりません。
何方かアドバイスをお願いします。※下記のソースコードはサイトより、引用しました。

index.html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>TODOLIST</title>
6    <link rel="stylesheet" href="css/style.css">
7    <script src="js/main.js" defer></script>
8</head>
9<body>
10    <h1>TODOLIST</h1>
11    <div id="container">
12        <input type="text" placeholder="Please enter your Todo" id="text-input"> 
13        <ol id="todo-list"> 
14     </ol>
15    </div>
16</body>
17</html>

main.js
1'use strict';
2
3const textInput = document.getElementById('text-input');
4const todolist = document.getElementById('todo-list');
5
6textInput.addEventListener('keydown', e => {
7    const text = textInput.value.trim();
8
9    if(text === '' || e.key !== 'Enter') {
10        return;
11    }
12    // console.log('todoが入力された')
13    
14    const li = document.createElement('li');
15    const span = document.createElement('span');
16    const button = document.createElement('button');
17
18    li.classList.add('list-item');
19    span.textContent = text;
20    span.classList.add('todo-text');
21
22    button.textContent = "Delete";
23    button.type = "button";
24    button.classList.add("delete-button");
25    button.addEventListener('click', e => {
26        todolist.removeChild(e.target.closest('li'));
27    });
28
29    li.appendChild(span);
30    li.appendChild(button);
31    todolist.appendChild(li);
32
33    textInput.value = '';
34});

style.css
1
2h1 {
3    text-align:center;
4}
5
6html {
7    font-size: 20px;
8}
9
10#container {
11    width: 400px;
12    margin: 50px auto 0;
13}
14
15#text-input {
16    width: 100%;
17    height: 40px;
18    margin-bottom: 30px;
19    box-sizing: border-box;
20    font-size: 1rem;
21    padding-left: 10px;
22}
23
24#todo-list {
25    width: 100%;
26    margin: 0;
27    padding: 0;
28}
29
30.list-item {
31    list-style: none;
32    display: flex;
33    justify-content: space-between;
34    margin-bottom: 5px;
35}
36
37.hide {
38    display: none;
39}

行動規範の内容に同意します

回答1件

ベストアンサー

連番にしたいだけなら、li要素を投入するタグをolにするだけで連番がつきます。

diff
1<div id="container">
2<input type="text" placeholder="Please enter your Todo" id="text-input"> 
3- <ul id="todo-list"> 
4- </ul>
5+ <ol id="todo-list"> 
6+ </ol>
7</div>