Javascript 使用addEventListener创建Meme生成器（无画布）

我正在完成以下评估：

-用户应该能够在页面上提交表单以在页面上生成新的meme，并且应该能够通过多次提交表单向页面添加多个meme。 -用户应该能够点击一个按钮从页面中删除一个meme。 -提交meme表单时，表单输入中的值应清除 我的代码没有显示meme。我肯定我错过了一些简单的东西，但我一直盯着它看，所以任何帮助都是感激的

让img=document.getElementsByTagName（“img”）；
let form=document.querySelector（“表单”）；
const button=document.querySelector（“按钮”）；
表格.附录列表（“提交”，功能（e）{
e、 预防默认值（）；
const meme=document.createElement（“div”）；
const textTop=document.createElement（“div”）；
const textbooth=document.createElement（“div”）；
const img=document.createElement（“img”）；
img.src=document.getElementById（“imageUrl”）.value；
textTop.classList.add（“textTop”）；
textTop.innerHTML=document.getElementById（“topText”）.value；
textbooth.classList.add（“textbooth”）；
text bottom.innerHTML=document.getElementById（“bottomText”）.value；
meme.classList.add（“meme”）；
meme.append（textTop）；
meme.append（textbooth）；
模因追加（img）；
让memeLocation=document.getElementById（“位置”）；
memeLocation.append（meme）；
表单.重置（）
})

正文{
字体系列：“Raleway”，无衬线；
背景色：浅青色；
}
h1，
氢{
文本对齐：居中；
}
输入{
宽度：100%；
填充：12px 20px；
利润率：8px0；
框大小：边框框；
}
钮扣{
背景色：rgb（43159226）；
填充：10px 20px；
字体大小：16px；
边界半径：8px；
边界：无；
}
.模因{
证明内容：中心；
边界半径：0.5雷姆；
边框：0.08rem纯黑色；
盒影：0 4px 8px 0 rgba（0,0,0,0.2）；
过渡：0.3s；
位置：相对位置；
}
.textTop{
位置：绝对位置；
顶部：10px；
左：30px；
颜色：#ffffff；
z指数：3；
}
.textbooth{
位置：绝对位置；
底部：20px；
左：30px；
颜色：#ffffff；
z指数：3；
}
.meme img{
最大宽度：100%；
z指数：2；
}

搞笑图片制作
完成以下表格，立即创建您的meme！
图像Url:
顶部文本：
底部文本：
添加模因

我将您的代码添加为一个片段，第一个meme确实有效。那么，你在显示所有的模因还是只显示第二个模因方面有问题？检查代码段以测试它。当我运行代码段时，它似乎对我有用（在您的问题中是演示代码）；您遇到的具体问题是什么？是否有理由它可以在代码段中工作，但不能在Chrome中工作？Bc这就是我面临的问题。我看你是对的，它在代码段中工作正常，但是当我尝试在Chrome中打开页面时，什么都没有出现。添加DOMContentLoaded事件侦听器后，它工作正常！感谢您指出代码片段正在运行，这有助于缩小范围！