使用 Javascript 在列表中插入新项目时，我得到一个空值答案

【问题标题】：I'm getting a null value while inserting a new item on a list by using Javascript使用 Javascript 在列表中插入新项目时，我得到一个空值
【发布时间】：2019-07-08 12:16:05
【问题描述】：

我使用 HTML、CSS 和 Javascript 创建了一个简单的待办事项应用程序。这个应用程序将列出待办事项。在这里，我们可以将新项目添加到待办事项应用程序或从列表中删除项目。我创建了一个函数来使用 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>

我需要向应用程序添加一个新的待办事项。并且 todo 应用程序必须准确地列出我需要的新项目。例如：去健身房 [在我的代码中，我得到的是 null 而不是“去健身房”]。

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 = '';
}
}

【问题讨论】：

标签： javascript html function null event-listener

【解决方案1】：

var item = input.nodeValue; 应该是var item = 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.value;
  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 = '';
  }
}

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

【讨论】：