Я создал простое приложение, использующее 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>
Мне нужно добавить новую задачу в приложение. И приложение todo должно перечислить новый элемент именно так, как мне нужно. Например: иди в спортзал [в моем коде я получаю ноль, а не «иди в спортзал»].
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 = '';
}
}