Meme Generator：事件侦听器不允许一次在页面上显示多个图像

Question

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>

首先 post 这里是一个相对较新的编码器，请耐心等待。

我一直在研究这个 meme 生成器，到目前为止它可以拍摄图像 URL 和文本并将它们添加到指定的 div看起来像个表情包。

我有两个主要问题：

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

如果我能更清楚地说明我的问题，请告诉我，自昨晚以来我一直被困在这里，我的谷歌搜索越来越无用。

Answer 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>

Meme Generator：事件侦听器不允许一次在页面上显示多个图像

Meme Generator: Event Listener not allowing for multiple images on the page at once

javascript

css

forms

append

addeventlistener