Javascript 在按钮上使用addEventListener（）添加DOM元素时的奇怪行为

我试图在用户单击按钮时创建一个包含用户信息的项目卡。当用户单击“新建项目”按钮时，会弹出一个模式表单，其中包含用户信息和一个“创建”按钮。每当用户单击“创建”按钮时，程序应添加新的项目卡。为了实现这一点，我在

addnewproject

按钮中添加了一个click事件监听器，并在

Create

按钮中添加了另一个。我将创建事件监听器嵌套在添加新项目事件监听器中。 下面是事件侦听器

addTileBtn.addEventListener("click", (e) => {
    e.preventDefault();
    modal.style.display = "block";
    const titleField = document.querySelector("#title");
    const descriptionField = document.querySelector("#description");
    const create = document.querySelector("#create");
    const close = document.querySelector("#close");
    create.addEventListener("click", (e) => {
        e.preventDefault();
        title = titleField.value;
        description = descriptionField.value;
        function createProjectTile() {
            const projectTile = document.createElement("div");
            projectTile.classList.add("cards-grid__tile");
            projectTile.textContent = title;
            console.log(title, description);
            return projectTile;
        }
        cardsGrid.appendChild(createProjectTile());
        modal.style.display = "none";
    });
    close.addEventListener("click", (e) => {
        e.preventDefault();
        modal.style.display = "none";
    });
});

问题是，当我创建第一张卡时，它工作得很好。但是第二次，它创建了两张牌，第三次创建了3张牌，以此类推

---

以下是完整代码的详细信息。

我已经编辑了您的代码，这应该是您想要的：

const logoutBtn=document.querySelector（“#logout”）；
const addTileBtn=document.querySelector（“#add tile”）；
const cardsGrid=document.querySelector（“.cards网格”）；
const modal=document.querySelector（“.modal”）；
const titleField=document.querySelector（“标题”）；
const descriptionField=document.querySelector（“#description”）；
const create=document.querySelector（“create”）；
const close=document.querySelector（“关闭”）；
addTileBtn.addEventListener（“单击”，（e）=>{
e、 预防默认值（）；
modal.style.display=“块”；
titleField.value=“”；
descriptionField.value=“”；
});
create.addEventListener（“单击”，（e）=>{
e、 预防默认值（）；
title=titleField.value；
description=descriptionField.value；
函数createProjectTile（）{
const projectTile=document.createElement（“div”）；
projectTile.classList.add（“cards-grid\uu tile”）；
projectTile.textContent=标题；
控制台日志（标题、说明）；
返回项目块；
}
appendChild（createProjectTile（））；
modal.style.display=“无”；
});
close.addEventListener（“单击”，（e）=>{
e、 预防默认值（）；
modal.style.display=“无”；
});
：根目录{
--主红色：#be3144；
--主白色：#f0；
--主灰色：#303841；
--主蓝：#45567d；
--main-blue3:#1c262f；
--main-blue2:#27333d；
--main-blue1:#2e3d49；
--主色浅蓝色：#02b3e4；
--主黑：#000000；
--主亮黑色：#3a3d40；
--主色为深黑色：#181719；
}
* {
框大小：边框框；
保证金：0；
填充：0；
}
html，
身体{
身高：100%；
}
img{
显示：块；
最大宽度：100%；
高度：自动；
}
身体{
字体系列：“罂粟花”，无衬线；
字体大小：1.8rem；
字体大小：400；
线高：1.4；
颜色：var（--主白色）；
}
h1，
氢{
字体系列：“Raleway”，无衬线；
字号：700；
文本对齐：居中；
}
h1{
字体大小：3.5rem；
}
氢{
字号：2rem；
颜色：var（--主蓝）；
显示：块；
}
p{
字体大小：1.8rem；
字号：200；
字体：斜体；
颜色：var（--主白色）；
}
a{
文字装饰：无；
文本对齐：居中；
显示：块；
}
梅因先生{
显示器：flex；
弯曲方向：行；
证明内容：之间的空间；
高度：100vh；
背景色：var（--主白色）；
}
.盒子{
边界：无；
盒影：02px4pxRGB（0.0/10%），08px16pxRGB（0.0/10%）；
边界半径：8px；
背景色：#fff；
}
.box\u字段{
填充：20px；
}
.box字段{
边缘底部：20px；
显示器：flex；
证明内容：中心；
}
.图标{
位置：绝对位置；
填充：10px；
颜色：灰色；
最小宽度：50px；
文本对齐：居中；
字体大小：20px；
最高：50%；
转化：translateY（-50%）；
}
输入，
文本区{
字号：17px；
填充：14px 16px；
宽度：300px；
光标：文本；
边框：1px实心变量（--主灰色）；
边界半径：6px；
大纲：无；
左侧填充：45px；
}
.box btn{
边界：无；
边界半径：6px；
字体大小：20px；
线高：48px；
填充：0 16px；
}
.app，
.主要内容{
身高：100%；
}
.标题区{
背景色：var（--main-blue3）；
宽度：100%；
字号：18px；
最小高度：60px；
显示器：flex；
弯曲方向：行；
柔性包装：包装；
证明内容：之间的空间；
对齐项目：居中；
位置：固定；
排名：0；
左：0；
}
.标题-区域项目{
填充：10px 30px；
}
.注销btn{
边界：无；
边界半径：6px；
字体大小：20px；
线高：30px；
填充：0 16px；
宽度：100px；
光标：指针；
颜色：#fff；
背景色：var（--主浅蓝色）；
}
.注销btn：悬停{
背景色：#029be4；
}
.内容区{
边缘顶部：60像素；
宽度：100%；
身高：100%；
溢出：自动；
背景色：var（--主蓝）；
}
.卡片网格{
显示：网格；
网格模板列：重复（自动拟合，最小值（200px，1fr））；
栅隙：50px；
边缘底部：3rem；
填充物：5rem 3rem；
}
.cards-grid\uuuuu瓷砖{
背景色：var（--main-blue2）；
最大宽度：200px；
填充：30px；
文本对齐：居中；
字号：1.2rem；
}
.添加瓷砖btn{
边界：无；
边界半径：6px；
字体大小：15px；
线高：48px；
填充：0 10px；
光标：指针；
颜色：#fff；
背景色：var（--主浅蓝色）；
}
.莫代尔{
显示：无；
宽度：350px；
字号：1.2rem；
位置：相对位置；
排名前10%；
左：50%；
转化：translateX（-50%）；
溢出：可见；
}
.盒子{
背景色：var（--main-blue1）；
不透明度：0.95；
}
.box字段{
弯曲方向：立柱；
}
输入，
文本区{
填充物：5px10px；
调整大小：无；
}
.包装纸{
位置：相对位置；
文本对齐：居中；
}
.创建btn{
宽度：100px；
光标：指针；
颜色：#fff；
背景色：var（--主浅蓝色）；
}
.结束{
光标：指针；
位置：绝对位置；
顶部：20px；
左：290px；
}
#情态形式{
位置：绝对位置；
}
.图标{
颜色：var(-