Динамически добавлять div вокруг изображения, отправленного из формы URL - PullRequest
Новая
       87

Динамически добавлять div вокруг изображения, отправленного из формы URL

3 голосов
/ 08 июля 2020

Прежде всего, это новость для javascript и кодирования в целом, так что извиняюсь за это. Я добавляю новое изображение из URL-адреса, отправленного из формы. Мне нужно динамически добавлять div к изображению, когда оно загружается в DOM, чтобы я мог в конечном итоге добавить текст в верхнюю и нижнюю часть изображения. Это приложение в стиле генератора мемов. Не уверен, уместно ли удалить logi c в конце, но я включу его на всякий случай. Заранее спасибо! 

form.addEventListener('submit', function(e) {
e.preventDefault();

let newMeme = new Image(470, 300);
newMeme.src = imageURL.value;
newMeme.setAttribute('class', 'memeStyle');
memeDiv.appendChild(newMeme);
imageURL.value = '';

newMeme.addEventListener('click', function(e) {
    newMeme.remove(e.target);
    console.log(e.target);
});

});

1 Ответ

0 голосов
/ 08 июля 2020

Что-то в строках этого: 

form.addEventListener('submit', function(e) {
  e.preventDefault();
  
  // Create the image
  const newMeme = new Image(200, 130);
  newMeme.src = imageURL.value;
  newMeme.setAttribute('class', 'memeStyle');
  
  // Create a top caption
  const topCaption = document.createElement('p');
  topCaption.appendChild(document.createTextNode('TOP CAPTION'));
  // Create a botom caption
  const bottomCaption = document.createElement('p');
  bottomCaption.appendChild(document.createTextNode('BOTTOM CAPTION'));
  
  // Add stuff to the wrapper
  memeDiv.appendChild(topCaption);
  memeDiv.appendChild(newMeme);
  memeDiv.appendChild(bottomCaption);
  
  imageURL.value = '';

  newMeme.addEventListener('click', function(e) {
    memeDiv.innerHTML = '';
  });
});
#memeDiv {
  float: left;
  position: relative;
}
#memeDiv p {
  position: absolute;
  left: 0;
  width: 100%;
  margin: 4px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  text-shadow:
   -1px -1px 0 #000,  
    1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000;
}
#memeDiv p:first-of-type { top: 0; }
#memeDiv p:last-of-type { bottom: 0; }
<form id="form">
  <input id="imageURL" value="https://res.cloudinary.com/sagacity/image/upload/c_crop,h_1001,w_1500,x_0,y_0/c_limit,dpr_auto,f_auto,fl_lossy,q_80,w_1080/Kitten_murder_Jeff_Merkley_2_copy_hdpoxd.jpg">
  <input type="submit" value="Submit"> ← Hit submit
</form>

<div id="memeDiv"></div>
...