Блог

Я пытаюсь создать элемент в нажатой позиции, и я понял следующий код. Но при нажатии на страницу ничего не произошло, и в консоли не было обнаружено ошибок, почему?

 function create(event) {
  var i = document.createElement("img");
  i.setAttribute("id", "a");
  i.src = *imagefile*;
  i.position = "absolute";
  i.style.left = event.clientX 'px';
  i.style.top = event.clientY 'px';
}
document.addEventListener("click", create);
  

Несколько проблем

1. Вы создаете элемент, но на самом деле никуда его не добавляете. Вам нужно обязательно добавить его в dom с document.body.appendChild() помощью .
2. i.position должно быть i.style.position , поскольку позиция — это стиль CSS.
3. Небольшая придирка. Атрибут ‘id’ должен быть уникальным на странице. Нажатие несколько раз сделает это неверным. В этом сценарии это просто не нужно.

 function create(event) {
  //Create the image
  var i = document.createElement('img');

  //Set the source of the image
  i.src = 'https://www.mozilla.org/media/img/styleguide/identity/firefox/guidelines-logo.7ea045a4e288.png';

  //Set CSS styles so it appears where you clicked (Top left corner)
  i.style.position = 'absolute';
  i.style.left     = event.clientX   'px';
  i.style.top      = event.clientY   'px';
  
  //Add it to the body of the document
  document.body.appendChild(i);
}
//Main event listener for clicks
document.addEventListener('click', create);