Создание генератора мемов с помощью addeventListener (без холста) ⇐ Html

[Anonymous]

Я завершаю следующую оценку: < /p>

Пользователь должен иметь возможность отправить форму на странице, чтобы генерировать новый мем на странице, и должен быть в состоянии добавить несколько мемов на страницу, отправляя форму несколько раз. Представленные значения в входах формы должны быть очищены < /li>
< /ul>

Мой код не отображает мем. Я уверен, что мне не хватает чего-то простого, но я смотрел на это навсегда, так что любая помощь ценится.

Код: Выделить всё

let img = document.getElementsByTagName("img");
let form = document.querySelector("form");
const button = document.querySelector("button");
form.addEventListener("submit", function(e){
e.preventDefault();
const meme = document.createElement("div");
const textTop= document.createElement("div");
const textBottom = document.createElement("div");
const img = document.createElement("img");

img.src = document.getElementById("imageUrl").value;
textTop.classList.add("textTop");
textTop.innerHTML = document.getElementById("topText").value;

textBottom.classList.add("textBottom");
textBottom.innerHTML = document.getElementById("bottomText").value;

meme.classList.add("meme");
meme.append(textTop);
meme.append(textBottom);
meme.append(img);
let memeLocation = document.getElementById("location");
memeLocation.append(meme);

form.reset()

})< /code>
body {
font-family: 'Raleway', sans-serif;
background-color: lightcyan;
}

h1,
h2 {
text-align: center;
}

input {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}

button {
background-color: rgb(43, 159, 226);
padding: 10px 20px;
font-size: 16px;
border-radius: 8px;
border: none;
}

.meme {
justify-content: center;
border-radius: 0.5rem;
border: 0.08rem solid black;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
position: relative;
}
.textTop {
position: absolute;
top: 10px;
left: 30px;
color: #ffffff;
z-index: 3;
}

.textBottom {
position: absolute;
bottom: 20px;
left: 30px;
color: #ffffff;
z-index: 3;
}

.meme img {
max-width: 100%;
z-index: 2;
}< /code>
  

Meme Generator
Complete the form below to instantly create your meme!

Image Url: 
Top Text: 
Bottom Text: 
Add Meme

Подробнее здесь: https://stackoverflow.com/questions/643 ... -no-canvas