нажмите, чтобы добавить изображение JavaScript

Question

В данный момент я разрабатываю сайт, на котором при нажатии на страницу добавляется изображение.

Возможно ли, что код по-прежнему будет работать, но он также не повлияет на изображения, расположенные ниже по странице ?

Я пытался изменить, чтобы он не связывался с тегом "img", но, похоже, это не работает. В первый раз, работая с JS, он настолько новичок во всем этом.

Js выглядит сейчас так

const images = [
"benjones_con4.jpg", 
"ben_jones_ts2.jpg", 
"benjones_con3.jpg"
]

let i = 0 

function placeImage(x, y) {

  const nextImage = images[i]

  const img = document.createElement("img")
  img.setAttribute("src", nextImage)
  img.style.left = x + "px"
  img.style.top = y + "px"

  document.body.appendChild(img)

  i = i + 1

  if (i >=images.length) {
    i = 0
  }
}

document.addEventListener("click", function (event) {

  event.preventDefault()
  placeImage(event.pageX, event.pageY)
})

document.addEventListener("touchend", function (event){
  event.preventDefault()
  placeImage(event.pageX, event.pageY)

})

img {
  position: absolute;
  transform: translate(-50%, -50%) scale(0.5);
  animation: fadein 0.5s;
}

@keyframes fadein {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

Answer 1

Как я понял из последнего комментария, если вы не хотите, чтобы загруженный img конфликтовал с другими тегами "img" на вашей странице, вам нужно добавить какой-то значимый класс для созданного элемента img. И определить стили для загруженного изображения отдельно.

function placeImage(x, y) {
  const nextImage = images[i]
  const img = document.createElement("img")
  // here adding class for created img tag
  img.classList.add('external-loaded-img')
  ...
}

// instead of global img, define for class
.external-loaded-img {
  position: absolute;
  transform: translate(-50%, -50%) scale(0.5);
  animation: fadein 0.5s;
}

@keyframes fadein {
  0% {opacity: 0;}
  100% {opacity: 1;}
}