Search code examples
listinputinnerhtml

How can I show an edited innerHTML element in my todo list?


I have coded for a task-todo list that can be either deleted or edited for modifications in the input text field. However once edited in the input text field for modification I can not get the new field text value.

const InputTask = document.getElementById('inputTask')
const AddTaskBtn = document.getElementById('add-task')

function AddTask(){
    if(InputTask.value != ''){
        i++
        const Task = InputTask.value
        let p = document.createElement('p')
        let ul = document.createElement('ul')
        let litwo = document.createElement('li')
        let span = document.createElement('span')
        let ultwo = document.createElement('ul')
        let lithree = document.createElement('li')    
        let lione = document.createElement('li')

        ultwo.appendChild(lithree)
        lithree.setAttribute('id','editer'+ i)
        lithree.innerHTML= 'Edit'
        lithree.classList.add('submenu')
        lithree.addEventListener('click', function EditList(){
            InputTask.value = p.innerHTML
            authorisation = false
            AddTaskBtn.addEventListener('click',function ReplaceList(){
                EditedTask = document.getElementById('inputTask')
                let idlist = lione.id
                let liToAddIn = document.getElementById(''+ idlist)
                let idp = p.id
                let ptoBeRemoved = document.getElementById(''+ idp)
                ptoBeRemoved.remove()
                ptoAdd = document.createElement('p')
                liToAddIn.classList.add('thelists')
                liToAddIn.appendChild(ptoAdd)
                liToAddIn.insertBefore(ptoAdd,ul)
                ptoAdd.setAttribute('id',idp)
                ptoAdd.classList.add('the-task')
                ptoAdd.innerHTML = EditedTask.value    
            })
            
        })   
    }
}

AddTask()

Can somebody help me get back from there the modified input field text.


Solution

  • Could solve it using InputTask.addEventListener with 'change' used for input type text to edit inside input field and get p.textContent and e.target.value