У меня проблемы с получением textContent некоторых из моих элементов.Вопрос возникает из строки 88-91.Строка 91 возвращает значение NULL.Я не понимаю, почему это так.Я смог проверить это, установив строку 91 в переменную и console.log () для консоли, и значение было возвращено как ноль.Кроме того, в строке 99 моя консоль выдает ошибку «Uncaught TypeError: Невозможно прочитать свойство firstChild of undefined».Я предполагаю, что эта ошибка связана с проблемой, с которой я сталкиваюсь в строках 88-91, но я не совсем уверен, потому что она говорит неопределенное и не нулевое.Элементы HTML содержат текст внутри них, поэтому я не знаю, почему он возвращает ноль.Я не уверен, что мне не хватает.Любое понимание очень ценится.Спасибо заранее за понимание, ребята!
HTML-разметка:
(function(){
const taskList = document.querySelector('ul');
const completedList = document.querySelector('#completed-task');
const editTask = document.querySelector('#edit-task');
const cover = document.querySelector('.cover');
const editedInfo = document.querySelector('#edited-info');
const editedDate = document.querySelector('#edited-date');
const editedName = document.querySelector('edited-item');
let editedListItem;
document.querySelector('button').addEventListener('click', function(e) {
/* Preventing Page Default Page Refresh*/
e.preventDefault();
/* Grabbing User Input */
let userInput = document.querySelector('input').value;
let userDate = document.getElementById('date').value;
let userInfo = document.getElementById('userInfo').value;
/* Creating Elements */
let listItem = document.createElement('li');
let container = document.createElement('div');
let item = document.createElement('span');
let deletebutton = document.createElement('span');
/* Update: February 4, 2019 --> Creating Info Box */
let infoBox = document.createElement('div');
let dueDate = document.createElement('p');
let info = document.createElement('p');
let span = document.createElement('span');
/* Update: February 5, 2019 --> Creating Edit button */
let edit = document.createElement('span');
/* Adding Attributes */
container.setAttribute('class', 'container');
deletebutton.setAttribute('class','delete');
infoBox.setAttribute('class','info');
edit.setAttribute('class', 'edit');
/* Setting User Input */
item.textContent = userInput;
span.textContent = userDate;
info.textContent = userInfo;
deletebutton.textContent = "Discard";
dueDate.textContent = "Due: ";
edit.textContent = "Edit";
/* Adding Elements to List */
taskList.appendChild(listItem);
listItem.appendChild(container);
container.appendChild(item);
container.appendChild(deletebutton);
listItem.appendChild(infoBox);
infoBox.appendChild(dueDate);
infoBox.appendChild(info);
dueDate.appendChild(span);
infoBox.appendChild(edit);
});
document.querySelector('#task-list').addEventListener('click',function(event){
if(event.target.className == 'delete') {
const li = event.target.parentElement;
li.parentElement.removeChild(li);
}
});
/* Update: February 4, 2019 --> Hide Tasks Checkbox */
document.forms['hide-task'].addEventListener('change', function(event){
const checkbox = document.querySelector('input[type="checkbox"]');
if (checkbox.checked === true) {
taskList.style.display = 'none';
} else {
taskList.style.display = 'block';
}
});
taskList.addEventListener('click', function(event){
if (event.target.className == 'complete') {
let parent = event.target.parentElement.parentElement;
completedList.appendChild(parent);
}
/******* ISSUE OCCURS IN THIS CODE BLOCK *************/
if (event.target.className == 'edit') {
event.preventDefault();
editTask.style.display = 'flex';
cover.style.display = 'block';
editedDate.value = event.target.previousSibling.previousSibling.textContent;
editedInfo.value = event.target.previousSibling.textContent;
editedName.value = event.target.parentElement.previousSibling.firstChild.textContent;
editedListItem = event.target.parentElement.parentElement;
}
});
document.querySelector('#change').addEventListener('click', function(event){
editedListItem.firstChild.firstChild.textContent = editedName.value;
editedListItem.lastChild.firstChild.textContent = editedDate.value;
editedListItem.lastChild.lastChild.textContent = editedInfo.value;
editTask.style.display = 'none';
cover.style.display = 'none';
});
})()
<!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">
<title>To Do List</title>
</head>
<body>
<div class="cover"></div>
<h1>To do List</h1>
<form>
<div id="input-button">
<input type="text" placeholder="Add an item..." class="item">
<button type="submit" class="add">+</button>
</div>
<div>
<input type="text" placeholder="Due Date..." id="date">
<input type="text" placeholder="About the task..." id="userInfo">
</div>
</form>
<hr>
<ul id="task-list">
<li>
<div class="container">
<span class="title">Example Task</span>
<span class="delete">Discard</span>
</div>
<!-- Update: Feb #, 2019 -->
<div class="info">
<p>Due: <span>January 15, 2019</span></p>
<p>This is some example text that adds additional context or information for the task</p>
<span class="edit">Edit</span>
</div>
</li>
</ul>
<!-- Update: February 5, 2019 -->
<ul id="completed-task">
<li id="title">Completed Tasks</li>
</ul>
<!-- Update: February 4, 2019 -->
<form id="hide-task">
<div>
<input type="checkbox" name="hide-task">
<label for="hide-task">Hide Tasks</label>
</div>
</form>
<form id="edit-task">
<input type="text" placeholder="Edit item..." id="edited-item">
<input type="text" placeholder="Edit Due Date..." id="edited-date">
<input type="text" placeholder="Edit about the task..." id="edited-info">
<button id="change" type="button">Change</button>
</form>
</body>
</html>