Meme Generator：事件侦听器不允许同时在页面上显示多个图像答案

【问题标题】：Meme Generator: Event Listener not allowing for multiple images on the page at onceMeme Generator：事件侦听器不允许同时在页面上显示多个图像
【发布时间】：2022-01-23 23:53:57
【问题描述】：

const form = document.querySelector('#memeForm');
const imageInput = document.querySelector('#imageURL');
const topText = document.querySelector('#textOnTop');
const bottomText = document.querySelector('#textOnBottom');
const results = document.querySelector('#results');

form.addEventListener('submit', function(e) {
    e.preventDefault();
    const meme = document.createElement('div');
    const image = document.createElement('img');
    const textTop = document.createElement('div');
    const textBottom = document.createElement('div');
    const removeBtn = document.createElement('button');
   
    //allows file to be read by the DOM as an image?
    image.src = imageInput.value;

    
    textTop.classList.add('textTop');
    textTop.innerHTML = topText.value;

    textBottom.classList.add('textBottom');
    textBottom.innerHTML = bottomText.value;
 
    //allows the button created in line 16 and appended to the 'meme' div in line 40 to remove all contained within the parent 'meme' div
    removeBtn.innerText = "Delete Meme";
    removeBtn.addEventListener('click', function(e) {
        e.target.parentElement.remove();
    });

    
    //Does classList.add allow the append methods that follow to be added to 'meme'?
    meme.classList.add('meme');
    meme.append(image);
    meme.append(textTop);
    meme.append(textBottom);
    meme.append(removeBtn);
  
    
    //appends ALL meme inputs to the specified location(section tag)?
    results.append(meme);
    
    //clears form's inputs once form is submitted
    form.reset();

});


//cool and colorful mousemove feature!
document.addEventListener('mousemove', function(e) {
    // console.log('e.pageX, e.pageY');
    const r = Math.round(e.pageX * 255 / window.innerWidth);
    const b = Math.round(e.pageY * 255 / window.innerHeight);
    const color = `rgb(${r}, 0, ${b})`;
    document.body.style.backgroundColor = color;
    

});

h1 {
    font-family: 'Montserrat', sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

h4 {
    font-family: 'Montserrat', sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

label {
    font-weight: bolder;
    margin-bottom: 20px;
    font-family: 'Montserrat', sans-serif;
}

.meme {
    position: relative;
}

.textTop {
    position: absolute;
    top: 30px;
    right: 200px;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    z-index: 2;
    font-size: 40px;
}

.textBottom {
    position: absolute;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 40px;
    z-index: 2;
    bottom: 100px;
}

.meme image {
    max-width: 100%;
    z-index: 1;
}

input {
    width: 50%;
    box-sizing: border-box;
    margin-bottom: 20px;
}

.submitBtn {
    width: 12%;
    float: right;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meme Generator</title>
    <link rel="stylesheet" href="meme.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200&display=swap" rel="stylesheet">
</head>

<body>
    <div>
      <h1>Meme Generator</h1>
      <h4>Fill out the form to start creating memes!</h4>
    </div>
    
    <form action="" id="memeForm">
        <p>
            <label for=""> Image URL
                <input type="url" placeholder="What's the URL for your meme?" id="imageURL">
            </label>
        </p>
        <p>
            <label for=""> Text on Top
                <input type="text" placeholder="(Optional) What text do you want at the top of your meme?" id="textOnTop">
            </label>
        </p>
        <p>
            <label for=""> Text on Bottom
                <input type="text" placeholder="(Optional) What text do you want at the bottom of your meme?" id="textOnBottom">
            </label>
        </p>
        <p>
            <input type="submit" value="Create Meme!" class="submitBtn"></input>
        </p>
    </form>

    <!-- saw many people use canvas but when I tried to use that tag my image wouldn't load -->
    <div id="results"></div>

   <script src="meme.js"></script>
</body>


</html>

这里的第一篇文章和一个相对较新的编码器，请多多包涵。

我一直在研究这个 meme 生成器，到目前为止，它可以获取图像 URL 和文本并将它们添加到指定的 div 中，从而产生看起来像 meme 的东西。

我有两个主要问题：

一旦我填写了输入并按下“创建模因！”按钮，图像和文本被附加到它们各自的元素和包含在“meme”div中的元素，但我无法创建另一个meme，直到我使用我在我的js文件中创建的“删除meme”按钮删除meme .本质上，“创造模因！”生成 meme 后，按钮不可点击。该项目的目标之一是让用户通过多次提交表单来向页面添加多个表情包。
我不知道如何正确定位显示在图像顶部和底部的文本。我敢肯定，如果我更多地使用 CSS 中的定位，它看起来更像是一个标准的 meme，但我宁愿让文本自动居中在图像的顶部和底部。例如，如果我调整页面大小，则图像和文本不会随之调整。

如果我能更清楚地说明我的问题，请告诉我，我从昨晚开始就被困在这里，我的谷歌搜索变得越来越徒劳。

【问题讨论】：

您的 CSS 将 div 放在按钮的顶部，因此您无法单击它。右键单击并检查按钮，您可以看到它显示的元素。这是一个 CSS 错误，而不是 JavaScript 错误。
太棒了！很好，我能够通过在 div 中添加一个 margin-top: 50px 来解决这部分问题。文本仍有问题，但我很感激！

标签： javascript css forms append addeventlistener

【解决方案1】：

点击按钮的问题是你的 div 覆盖了按钮，所以当你点击时，你点击的是 div，而不是按钮。

对于布局，有很多方法可以解决它。一种方法是使用一些相对和绝对定位。

.wrapper {
  position: relative;
  width: 80%;
}

.wrapper p {
  position: absolute;
  left: 0;
  text-align: center;
  width: 100%;
  font-size: 1.4em;
}

.wrapper img {
  width: 100%;
}


.wrapper p.top {
  top: 0;
}

.wrapper p.bottom {
  bottom: 0;
}

<div class="wrapper">
  <p class="top">Hello World</p>
  <img src="http://placekitten.com/400/300" />
  <p class="bottom">Bacon Bacon Bacon Bacon Bacon Bacon Bacon Bacon</p>
</div>

【讨论】：