javascript - 如何添加在仅使用 DOM 的 Todo 列表的输入选项卡中按“Enter”？

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 的 id。我很困惑，在输入选项卡上的按键上，我应该启动将在按下回车键时存储 li 的事件。

标签： javascripthtmlcss

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>