我正在尝试使用JavaScript编写ToDoList。
我有一个input-element。每当我键入内容并按Enter时，它都会创建一个新的字段集（在我的示例中是一个字段集，但也可以是一个Div），其类名称为“ .fieldListClass”，并使用P-Tag作为该字段集的子级。 P标签innerHTML是输入的值。我为此使用了Click-EventListener。
[每次单击后，我将所有.fieldListClass的查询选择器分配给一个nodeList“ fieldListQuery”。我什至将此nodeList转换为一个Array，但没有结果。
现在，我想创建一个addEventListner，但不在上一个。它应该是一个新的。并且它应该是所有fieldListQuery的click-EventListener，它在上一个函数中创建。（此部分在我的代码底部）
当我单击它时，应该会发生一些事情，例如删除当前目标等。但是它不会起作用，因为在函数外部，它总是说此变量未定义。我没有得到它，因为我在函数外部声明了它。
我还不想使用DOMNodeInserted或MutationObserver来检测DOM内部的更改。很简单，因为不再建议使用第一个，而我不知道如何使用它。许多人说这不是安全的方法。
请帮助吗？
let addDiv = document.createElement("div"); addDiv.id = "addDivId";
let listDiv = document.createElement("div"); listDiv.id = "listDivId";
let inputText = document.createElement("input"); inputText.id = "inputTextId";
let fieldList; // = document.createElement("fieldset");
let fieldDiv; // = document.createElement("div");
let fieldDivP; // = document.createElement("P");
let fieldListArr;
let fieldListQuery;
document.body.appendChild(addDiv);
addDiv.appendChild(inputText);
document.body.appendChild(listDiv);
inputText.addEventListener("keypress", event => {
if (event.key === "Enter") {
fieldList = document.createElement("fieldset");
fieldDiv = document.createElement("div");
fieldDivP = document.createElement("P");
listDiv.appendChild(fieldList);
fieldList.className = "fieldListClass";
fieldList.appendChild(fieldDiv);
fieldDiv.appendChild(fieldDivP);
fieldDivP.innerHTML = inputText.value;
fieldListQuery = document.querySelectorAll(".fieldListClass") ;
}
})
fieldListQuery.forEach(element => { // <- it say fieldListQuery is undefined.
fieldListQuery.addEventListener("click", e => {
e.currentTarget.innerHTML="test";
})
});
´´´
由于我对您的方法提出了批评，所以我认为这是很公平的，我至少尝试向您提供一些可以完成某些事情的代码（总体上，鉴于您的解决方案没有太多细节） 。
首先，我认为在其他解决方案更可行时通过脚本创建元素是一种反模式。您的脚本始终由HTML文档加载，该HTML文档可能已经包含许多有用的标记-包括输入字段（由createElement创建）。如果输入字段是“常量”，则无需在创建代码时浪费代码，只需将其放在您的标记中即可。
其次，即使是对于“按需”创建的元素或元素层次结构（作为对事件的反应，还是其他情况，使用templates通常都更易读和易于管理。
第三，您应该始终尝试查看是否可以在表单中使用交互式控件。我不会出于所有原因这样做，但是仅需说一下，它可以帮助用户代理筛选内容以及其他可访问性系统的内容。
这是一个简单的待办事项系统：
<html>
<head>
<script>
function submit_create_todo_item_form() {
const new_todo_fragment = document.getElementById("todo-item-template").content.cloneNode(true);
new_todo_fragment.querySelector(".body").textContent = document.forms[0].elements[0].value;
document.body.appendChild(new_todo_fragment);
}
</script>
<template id="todo-item-template">
<div class="todo-item">
<p class="body"></p>
</div>
</template>
</head>
<body>
<form action="javascript: submit_create_todo_item_form()">
<input>
</form>
</body>
<html>
请注意，我使用textContent而不是innerHTML为作为项目主体的段落节点分配内容。 innerHTML将需要调用HTML解析器，并且除非您打算在input字段的单行中键入hypertex，否则innerHTML仅花费您额外的钱，而没有明显的好处。如果您需要解释值verbatim，则完全需要textContent。因此，请牢记这一点。
我希望这是有用的，我以我认为的方式工作。