Javascript ToDoList-具有函数的DOM元素。用输入标签替换P标签，反之亦然。需要帮助以避免嵌套我的函数吗
我正在尝试编写一个待办事项列表。但我正在一步一步地尝试，我刚开始就面临着一个问题 我有一个带有按键事件功能的Javascript ToDoList-具有函数的DOM元素。用输入标签替换P标签，反之亦然。需要帮助以避免嵌套我的函数吗,javascript,html,function,dom,Javascript,Html,Function,Dom,我正在尝试编写一个待办事项列表。但我正在一步一步地尝试，我刚开始就面临着一个问题 我有一个带有按键事件功能的输入标签元素。 每次我键入内容并按enter键时，DOM都会创建一个新的P-Tag-Element。 这个P的内部html等于输入的值 p-Tag-Elements也有一个keypress事件，以防我们以后要编辑它。 如果我按下P元素，DOM将用一个新的输入元素替换这个元素。 这个新输入的值等于我们重新计算的p元素的内部html 此输入元素具有按键功能，如果我按enter键，它将被一个新的
输入标签元素P-Tag-Elementp-Tag-Elementskeypress事件p-Tag-ElementP-tag-ElementInput-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>
滴度
输入，
p{
显示：块；
保证金：5px；
填充：5px
}
document.addEventListener（“DOMContentLoaded”，evt=>{
const ausgabe=document.querySelector（“#display”）；
const DOMElementCreate=（{//使用函数创建我的厄运对象
内容=“”，
类型='div'，
事件={}，
父项=显示
} = {}) => {
让newElement=document.createElement（典型）；
newElement.innerHTML=内容；
newElement.value=内容；
Object.entries（events.forEach（event=>newElement.addEventListener（…event））；
parent.append（新元素）；
返回新元素；
}
DOMElementCreate（{//使用按键功能创建输入元素
类型：“输入”，
活动：{
按键：功能（事件）{
如果（event.key==“输入”）{
DOMElementCreate（{//使用单击函数创建p元素
类型：“p”，
内容：这个值，
活动：{
单击：功能（事件）{
this.replaceWith（DOMElementCreate（{//使用keypress函数将p元素替换为新的输入元素
类型：“输入”，
内容：this.innerHTML，
活动：{
按键：功能（事件）{
如果（event.key==“输入”）{
this.replaceWith（DOMElementCreate（{//用新的P元素替换输入元素
典型：“p”，
内容：这个值
}));
}
}
}
}));
}
}
})
}
}
}
});
});
const input=document.getElementById（'input'）；
window.onkeydown=（{key，target}）=>{
如果（键=='Enter'）{
//防止段落中出现换行符，并在回车时停止编辑
如果（目标！==输入）{
target.blur（）；
}else if（输入值）{
document.body.append（Para（input.value））；
input.value=''；
}
}
}
函数参数（值）{
const p=document.createElement（'p'）；
返回Object.assign（p{
text内容：值，
contentEditable:真
});
}