I'；当使用Javascript在列表中插入一个新项时，我得到一个空值_Javascript_Html_Function_Null_Event Listener

I'；当使用Javascript在列表中插入一个新项时，我得到一个空值

javascript html function

I'；当使用Javascript在列表中插入一个新项时，我得到一个空值,javascript,html,function,null,event-listener,Javascript,Html,Function,Null,Event Listener,我使用HTML、CSS和Javascript创建了一个简单的todo应用程序。此应用程序将列出待办事项。在这里，我们可以向todo应用程序添加新项目或从列表中删除该项目。我创建了一个函数，通过使用appendchild（）函数向应用程序添加新的todo项。当我列出新的待办事项时，我的列表中添加了一个空值 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

我使用HTML、CSS和Javascript创建了一个简单的todo应用程序。此应用程序将列出待办事项。在这里，我们可以向todo应用程序添加新项目或从列表中删除该项目。我创建了一个函数，通过使用appendchild（）函数向应用程序添加新的todo项。当我列出新的待办事项时，我的列表中添加了一个空值

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="style.css">
        <title>Todo application</title>
    </head>
    <body>
        <div id="container">
            <div class="controls" >
                <h1>My TODO List</h1>
                <p class="addtodo">Add new TODO items</p>
                <input type="text" id="input">
                <button type="button" id="add">Add TODO</button>
                <button type="button" id="remove">Remove TODO</button>
            </div>
            <ul id="list">
                <li class="mycheck"><input type="checkbox" id="check"><label>Attend Interviews</label></li>
                <li class="mycheck"><input type="checkbox" id="check"><label>Visit Consultancy</label></li>
                <li class="mycheck"><input type="checkbox" id="check" checked><label>Learn Aptitude</label></li>
            </ul>
        </div>
        <script src="script.js"></script>
    </body>
    </html>

var item=input.nodeValue应为var item=input.value

var ul=document.getElementById（'list'）；
李华；
var addButton=document.getElementById（'add'）；
addButton.addEventListener（'单击'，添加项）；
var removeButton=document.getElementById（'remove'）；
//removeButton.addEventListener（'单击'，removeItem）
//函数添加新的待办事项
函数addItem（）{
var input=document.getElementById（'input'）；
var项目=输入值；
ul=document.getElementById（'list'）；
var textnode=document.createTextNode（项目）；
如果（项目==''）{
返回false；
}否则{
//创建一个“li”元素
li=document.createElement（'li'）；
//创建一个复选框
var checkbox=document.createElement（'input'）；
checkbox.type='checkbox'；
setAttribute（'id'，'check'）；
var label=document.createElement（'label'）；
label.setAttribute（'for'，'item'）
//向网页添加元素
ul.儿童（标签）；
li.appendChild（复选框）；
label.appendChild（textnode）；
li.儿童（标签）；
ul.insertBefore（li，ul.childNodes[0]）；
设置超时（（）=>{
li.className='visual'；
}, 3);
input.value=''；
}
}

我的待办事项清单
添加新的待办事项
添加待办事项
删除待办事项

参加面试
访问咨询
学习能力


var ul = document.getElementById('list');
var li;

var addButton = document.getElementById('add');
addButton.addEventListener('click', addItem);

var removeButton = document.getElementById('remove');
removeButton.addEventListener('click',removeItem)


//Function to add new TODO items

function addItem(){
    var input = document.getElementById('input');
    var item = input.nodeValue;
    ul = document.getElementById('list');
    var textnode = document.createTextNode(item);

    if (item === ''){
        return false;
    }
    else {
        //create a "li" element
        li = document.createElement('li');

        //Create a checkbox
        var checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        checkbox.setAttribute('id','check');

        var label = document.createElement('label');
        label.setAttribute('for','item')

        //adding elements to the webpage

        ul.appendChild(label);
        li.appendChild(checkbox);
        label.appendChild(textnode);
        li.appendChild(label);
        ul.insertBefore(li, ul.childNodes[0]);

        setTimeout(() => {
            li.className = 'visual';
        }, 3);

        input.value = '';
}
}