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.
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