JavaScript的DOM问题

Question

我无法获取我的一些元素的textContent。这个问题源于线88-91。 91号线检索空值。我不明白为什么会这样。我能够通过设置线91​​到变量和的console.log（）的控制台来验证这个和值返回NULL。此外，在99行我的控制台是给我的，一个错误“遗漏的类型错误：无法读取属性未定义‘则firstChild’”。我假设这个错误与我的线88-91遇到的问题，但我不能完全肯定，因为它说，不确定和不为空。 HTML元素有他们的文字里面，所以我不知道为什么它会返回null。我不知道我错过了什么。任何洞察力不胜感激。预先感谢你们的见解！

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">&#43;</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>

Answer 1

休息一下，吃个晚饭后，我开始调试，一套新的眼睛和心灵unfrustrated发现的错误。一切现在能正常使用。

第一个问题：在querySelector一个错字负责的一个变量返回的textContent错误。

解：

const editedName = document.querySelector('#edited-item');

第二个问题：在大多数情况下previousSibling和previousElementSibling返回元素，但previousSibling将返回任何类型的兄弟姐妹。有些浏览器周围添加空白 元素等previousSibling将抓住元件周围的空白代替，但previousElementSibling始终抓住元素。我最初的代码被抓住元件周围的空白。

解：

    taskList.addEventListener('click', function(event){
    if (event.target.className == 'complete') {
        let parent = event.target.parentElement.parentElement;
        completedList.appendChild(parent);
    }

    if (event.target.className == 'edit') {
        event.preventDefault();
        editTask.style.display = 'flex';
        cover.style.display = 'block';
        editedDate.value = event.target.previousElementSibling.previousElementSibling.firstElementChild.textContent;
        editedInfo.value = event.target.previousElementSibling.textContent;
        editedName.value = event.target.parentElement.previousElementSibling.firstElementChild.textContent;
        editedListItem = event.target.parentElement.parentElement;
    }
});

document.querySelector('#change').addEventListener('click', function(event){
    editedListItem.firstElementChild.firstElementChild.textContent = editedName.value;
    editedListItem.lastElementChild.firstElementChild.firstElementChild.textContent = editedDate.value;
    editedListItem.lastElementChild.firstElementChild.nextElementSibling.textContent = editedInfo.value;

    editTask.style.display = 'none';
    cover.style.display = 'none';
});