how to make a numbered-list on my to-do list?

aminbasiran 0
Viewed 29

the code I wrote below gives me a list of task to do, however I would like to return a numbered-list everytime i enter a new task. How would i do it?

javascript

const addButton= document.getElementById('addtoDo');
const removeButton= document.getElementById('removetoDo');
const newtoDo = document.getElementById('todo');
const placement = document.getElementById('container');

addButton.addEventListener('click',()=>{
    var paragraph = document.createElement('p')
    paragraph.innerText = newtoDo.value
    paragraph.classList.add('styling1')
    placement.appendChild(paragraph)
    newtoDo.value=""
    paragraph.addEventListener('click',()=>{
        paragraph.classList.add('styling2')
        paragraph.addEventListener('click',()=>{
            paragraph.innerText=""
        })
    })
})
todo javascript
1 Answers

var paragraph = document.createElement('p') i replaced it with var paragraph = document.createElement('li') meaning creating li 'List-item' instead of a paragraph.also i changed the container to an ol'ordered list'

   const addButton = document.getElementById('addtoDo');
    const removeButton = document.getElementById('removetoDo');
    const newtoDo = document.getElementById('todo');
    const placement = document.getElementById('container');

    addButton.addEventListener('click', () => {
        var paragraph = document.createElement('li')
        paragraph.innerText = newtoDo.value
        paragraph.classList.add('styling1')
        placement.appendChild(paragraph)
        newtoDo.value = ""
        paragraph.addEventListener('click', () => {
            paragraph.classList.add('styling2')
            paragraph.addEventListener('click', () => {
                paragraph.innerText = ""
            })
        })
    })
<input id="todo" type="text">
<button id="addtoDo">AddTodo</button>
<button id="removetoDo">RemoveTodo</button>
<ol id="container">

</ol>

UmairFarooq0
Related