我正在尝试编写待办事项清单。但是我正在一步一步地尝试它，我一开始就是正确的，并且遇到了问题。
我有一个带有Input-Tag-Element功能的keypress-event。每次输入内容并按Enter键，DOM就会创建一个新的P-Tag-Element。此P的内部html等于输入的值。
P-Tag-Elements也有一个keypress-event，以防我们稍后想要edit。如果我按P Element，则DOM将用新的输入元素替换此Element。此新输入的值等于我们重新放置的p元素的内部html。
此输入元素具有按键功能，如果按Enter键，它将被新的P-Tag-Element代替。如果您看一下我的代码，那么您将看到所有函数都是嵌套的。在我的代码中，在“ editing”之后，您不能再对其进行edit，除非您在此当前函数内添加另一个函数，并且要停止editing。您必须添加另一个函数isdie函数和其他函数。
我真诚地希望有人能理解我的想法并能为我提供帮助。我找到了解决问题的方法，但我不喜欢它。我将p元素放入div标签中，并向div标签添加了click事件。每当我单击div标签时，它都会寻找第一个孩子，如果它的a P-Tag-Element会用Input-Tag-Element替换它，反之亦然。但这不是解决方案。使用此解决方案就像逃避了您将很快再次面临的问题。
<!DOCTYPE html>
<html lang="de">
<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>Titel</title>
<style>
input,
p {
display: block;
margin: 5px;
padding: 5px
}
</style>
</head>
<body>
<div id="display"></div> <!-- My Start Display -->
<script>
document.addEventListener("DOMContentLoaded", evt => {
const ausgabe = document.querySelector('#display');
const DOMElementCreate = ({ // creating my DOOM Ibjects with function
content = '',
typ = 'div',
events = {},
parent = display
} = {}) => {
let newElement = document.createElement(typ);
newElement.innerHTML = content;
newElement.value = content;
Object.entries(events).forEach(event => newElement.addEventListener(...event));
parent.append(newElement);
return newElement;
}
DOMElementCreate({ // creating input-element with a keypress function
typ: 'input',
events: {
keypress: function (event) {
if (event.key === "Enter") {
DOMElementCreate({ // creating p-element with a click function
typ: 'p',
content: this.value,
events: {
click: function (event) {
this.replaceWith(DOMElementCreate({ // replacing p-element with new input element with keypress function
typ: "input",
content: this.innerHTML,
events: {
keypress: function (event) {
if (event.key === "Enter") {
this.replaceWith(DOMElementCreate({ // replacing input-element with new P element
typ: "p",
content: this.value
}));
}
}
}
}));
}
}
})
}
}
}
});
});
</script>
</body>
</html>
您甚至不需要JavaScript。只需将段落的contendeditable属性设置为true。
contendeditable