Uncaught TypeError：使用“ this”时无法设置未定义的属性“ display”

Question

我正在研究这份待办事项清单，有待于练习，我有一个简单的问题。因此，在添加待办事项之后，当我单击其中一项任务时，它应该被划掉，然后在第二秒后消失。为了使消失的部分正常工作，在onClickHandler函数中，我必须这样做：

var p = this;
    window.setTimeout(function() {p.style.display = 'none'}, 1000);

如果我这样做

window.setTimeout(function() {this.style.display = 'none'}, 1000);

它给了我这个错误：未捕获的TypeError：虽然'this'和'p'实际上是同一件事，但无法设置未定义事件的属性'display'。

var input = document.getElementsByTagName("input")[0];

// everytime I add a new item, need to manually change input

function addItem (event) {
    if(event.key === 'Enter') {

        toDoItems = document.getElementsByClassName("todo-item");
        var text = event.target.value;
        itemNumber = this.getAttribute("itemNumber");

        // add class 'toDoShowing to .parentElement.parentElement
        this.parentElement.parentElement.classList.add('toDoShowing'); // bit tricky if I add HTML and might need to change the number of times I add .parentElement
        this.outerHTML = '<p>' + text + '</p>'

        var lastToDoItem = toDoItems[toDoItems.length - 1];

        var newDiv = document.createElement("div");
        newDiv.setAttribute('class', 'todo-item');

        // adding new div in the end
        lastToDoItem.parentElement.insertBefore(newDiv, lastToDoItem.nextSibling);
        var x = Number(itemNumber) + 1;
        var n = x.toString();
        newDiv.innerHTML = ''+
            '<button class="plus-button plus-button--small"></button>'+
                '<span>'+
                    '<input type="filled" itemNumber=' + n + ' placeholder="Enter something to do"></input>'+ // FIX THIS LINE
                '</span>';


        // call event listener again cause we created a new div
        var newInput = document.getElementsByTagName("input")[0];
        newInput.addEventListener('keydown', addItem);

    }

}

input.addEventListener('keydown', addItem);


// Now taking care of completing items
// everytime DOM changes, update
function timeOut(func) {
    setTimeout(func, 2000)
}

function onClickHandler() {
    var toRemove = this.querySelector('span p');
    var text = toRemove.innerText;
    toRemove.innerHTML = '<s>' + text + '</s>';

    // add a 2 second delay
    console.log(this);
    var p = this;
    window.setTimeout(function() {p.style.display = 'none'}, 1000); // why doesn't it work when I use 'this' instead of p
} // try to do this by changing toDoShowing to toDoHidden and adding a transition delay through CSS






toDoShowings = document.getElementsByClassName('toDoShowing');

// Select the node that will be observed for mutations
// var targetNode = document.getElementsByClassName('toDoShowing');
var targetNode = document.getElementById('todo-list');

// Options for the observer (which mutations to observe)
var config = { 
    attributes: false, 
    childList: true, 
    subtree: true };

// Callback function to execute when mutations are observed
var callback = function(mutationsList) {
    for(var mutation of mutationsList) {
        if (mutation.type == 'childList') {
            console.log('A child node has been added or removed.');
            for(let i = 0; i < toDoShowings.length; i++) {
                toDoShowings[i].addEventListener('click', onClickHandler);
            }
        }
    }
};

// Create an observer instance linked to the callback function
var observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);

.plus-button {
	margin: 8px;
	border: 2px solid lightgrey;
	background-color: #fff;
	font-size: 16px;
	height: 2.5em;
	width: 2.5em;
	border-radius: 999px;
	position: relative;
	
	&:after,
	&:before {
		content: "";
		display: block;
		background-color: grey;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	
	&:before {
		height: 1em;
		width: 0.2em;
	}

	&:after {
		height: 0.2em;
		width: 1em;
	}
}

.plus-button--small {
	font-size: 12px;
}

.plus-button--large {
	font-size: 22px;
}



.todo-item {
	display: flex;
	align-items: center;
}

input {
	padding: 5px;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>My Todo list</title>

		<link rel="stylesheet" href=TODO.css>
	</head>

	<body>

		<!-- Select date, the to do list changes according to the date he chose.
		Or I can have just 1 screen and sort the to do in terms of 
		1. Deadline
		2. Time the thing was added -->
		<h1>TO DO LIST</h1>
		<div id="todo-list">
			<div class="todo-item">
				<button class="plus-button plus-button--small"></button>
				<span>
					<input type="empty" itemNumber="1" placeholder="Enter something to do"></input>
					<!-- <button type="submit">Submit</button> -->
				</span>
			</div>
		</div>

		<script src=TODO.js>
		</script>
	</body>
</html>

那是为什么？