Как добавить <li>при нажатии «Enter» во вкладке ввода списка Todo, используя только DOM?

Question

var listLis=document.getElementById('list');
const addbutton=document.querySelector('.fa-plus')
const inputBar=document.querySelector('.show')


function showInput(e){
    inputBar.classList.toggle('show')
}

addbutton.addEventListener('click',showInput);
document.getElementById('myText').value='';
inputBar.addEventListener('keypress',seeToIt);

function seeToIt(e){

    var textInInput= document.getElementById('myText').value;
    var linode=document.createElement('li');
    if(e.code=='Enter'){
        linode.appendChild("Fpru");
        listLis.appendChild(linode)
        textInInput='';
    }
}

Это код для JS. HTML код -

<div id="container">
    <h1>To-Do List <i class="fa fa-plus"></i></h1>
    <input type="text" id='myText' class="show"placeholder="Add New To-Do">
    <ul id='list'>

    </ul>
</div>

Я не могу добавить задачу к моей ul. list - это идентификатор ul. Я смущен тем, что при нажатии клавиши на вкладке ввода я должен запустить событие, которое сохранит li при нажатии клавиши ввода.

Answer 1

Прямо сейчас работает?

var listLis=document.getElementById('list');
const addbutton=document.querySelector('.fa-plus')
const inputBar=document.querySelector('.show')
const delAll = document.querySelector('.deleteAll')



function showInput(e){
    inputBar.classList.toggle('show')
}

addbutton.addEventListener('click',showInput);
document.getElementById('myText').value='';
inputBar.addEventListener('keypress',seeToIt);

delAll.addEventListener('click', ()=>{ listLis.innerHTML = ''})


function seeToIt(e){
    var textInInput= document.getElementById('myText');
    var linode = document.createElement('li');
    if(e.code=='Enter'){
        linode.innerHTML = `${textInInput.value}<button class='del' onclick="this.parentNode.remove()"><i class="fas fa-window-close"></i></i></i></button>`
        listLis.appendChild(linode)
        textInInput.value='';
    }
}

<link rel='stylesheet' href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"
<div id="container">
    <h1>To-Do List <i class="fa fa-plus"></i></h1>
    <input type="text" id='myText' class="show"placeholder="Add New To-Do">
    <button class='deleteAll'><i class="fas fa-trash"></i></button>
    <ul id='list' >

    </ul>
    
</div>