我使用 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>
我需要向应用程序添加新的待办事项。待办事项应用程序必须准确地按照我的需要列出新项目。例如:去健身房[在我的代码中，我得到的是 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 = '';
}
}
最佳答案
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>关于javascript - 使用 Javascript 在列表中插入新项目时得到空值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56928260/