Попытка добавить атрибут «onclick» в HTML-элемент «img», созданный функцией javascript

Question

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

var NameFile = [];//Where the names of the files are stored

Function handleFiles() {
var inputElement = document.getElementById("input");
var fileList = inputElement.files; 

for(var i = 0; i < fileList.length; i++){

NameFile.push(fileList[i].name);
var Img = document.createElement("tr");
Img.setAttribute("id", "ImgTr" +(i));
document.getElementById("galeria" +(i)).appendChild(Img);

/ ... / * * 1004

var Img = document.createElement("tr");
Img.setAttribute("id", "ImgTr" +(i));
document.getElementById("galeria" +(i)).appendChild(Img);

var Imgz = document.createElement("td");
var image =document.createElement("img");
image.setAttribute("id", "imageID" +(i));
image.setAttribute("className", "bordered");
image.setAttribute("src","http://placehold.it/200/200/pink/black");
image.setAttribute("onclick","imgClick(this)");

image.src = window.URL.createObjectURL(fileList[i]);
  image.height = 50;
  image.with = 50;
  image.onload = function(){
    window.URL.revokeObjectURL(this.src);
  }

Теперь эту функцию я хочу вызвать, если щелкнуть изображение. Предполагается, что эта функция отображает границу вокруг изображения, по которому щелкнул пользователь.

 function imgClick(img) {

 if (img.className.indexOf('bordered') > -1) {
 img.className = img.className.replace('bordered', '').trim();
 } else {
 img.className += ' bordered';
 }

Он сравнивает аттрибут id с нажатием кнопки img с идентификаторами других изображений, а при равенстве показывает имя файла, хранящегося в массиве. NameFile

 for( var i=0; i<NameFile.length;i++){
 if("imageID"+[i]===img.getAttribute("id")){ 
 alert(NameFile[i]);
 }
 }
 }

Answer 1

Также вы можете создать изображение с HTMLInstance:

<div id="gallery"></div>

<script>
function createImg(src, height, weight, onclick) {
    const img = new Image(height, weight)
    img.src = src
    img.onclick = onclick
    return img
}

function addNewImage(image) {
    gallery.appendChild(image)
}

function handleClick () {
    alert('Image catch click event!')
}

const src = 'https://loremflickr.com/320/240'
const img1 = createImg(src, 100, 100, handleClick)

addNewImage(img1)
</script>

Answer 2

Вы можете получить доступ к нажатому элементу, используя event.target, например:

function imgClick(e) {  
  e.target.style.border = '2px solid #33cc33';  
}        

И связать событие, как показано ниже (как вы сделали в своем коде):

image.onclick = imgClick;

Или используя addEventListener :

image.addEventListener("click", imgClick, false);

Обратите внимание, что var imgTag = document.getElementsByTagName('img') возвращает массив (например) найденных элементов / узлов, поэтому imgTag.style... не будет работать.

Answer 3

Если вы хотите установить onclick, вам нужно установить свойство напрямую

image.onclick = imgClick;

Лучшим решением было бы добавить прослушиватель событий вместо

image.addEventListener( "click", imgClick ); 

А у тебя imgClick метод становится

function imgClick(e){      
    var imgTag = e.currentTarget;
    imgTag.onload = function()
    {
        window.URL.revokeObjectURL( imgTag.src );
        imgTag.hasImageLoaded = true;
    }
    if ( imgTag.hasImageLoaded )
    {
        imgTag.style.border = '2px solid #33cc33';
    }
}

или

function imgClick(e){
    var imgTag = e.currentTarget;
    imgTag.addEventListener("load", function()
    {
        window.URL.revokeObjectURL( imgTag.src );
        imgTag.hasImageLoaded = true;
    });
    if ( imgTag.hasImageLoaded )
    {
        imgTag.style.border = '2px solid #33cc33';
    }
}

Answer 4

Проблема в основном заключается в этой строке:

var imgTag=document.getElementsByTagName('img');

as document.getElementsByTagName('img'); возвращает HTMLCollection, а не один элемент. Поэтому, когда вы пытаетесь установить опору стиля, вы делаете это на HTMLCollection, а не на фактическом узле

Попробуйте вместо этого:

function imgClick(img){
  img.style.border = '5px solid pink';
}

var img = document.createElement('img');
img.setAttribute('src','http://placehold.it/200/200/pink/black');
img.setAttribute('onclick','imgClick(this)');

document.body.append(img);

EDIT:

Если вы хотите, чтобы второй щелчок убрал границу, есть несколько способов сделать это. Одним из способов было бы добавить класс к элементу, когда он щелкается один раз. Затем мы можем проверять класс при каждом нажатии, чтобы решить, добавлять ли границу или удалять ее.

Пример:

function imgClick(img) {
  if (img.className.indexOf('bordered') > -1) {
    // Already has border
    img.style.border = 'none';
    img.className = img.className.replace('bordered', '').trim();
  } else {
    // Does not have border
    img.style.border = '5px solid pink';
    img.className += ' bordered';
  }

}

var img = document.createElement('img');
img.setAttribute('src', 'http://placehold.it/200/200/pink/black');
img.setAttribute('onclick', 'imgClick(this)');

document.body.append(img);

Примечание. Если стиль рамки не меняется, вы можете переместить стиль в стиль CSS и просто переключить класс на изображении следующим образом:

function imgClick(img) {
  if (img.className.indexOf('bordered') > -1) {
    img.className = img.className.replace('bordered', '').trim();
  } else {
    img.className += ' bordered';
  }

}

var img = document.createElement('img');
img.setAttribute('src', 'http://placehold.it/200/200/pink/black');
img.setAttribute('onclick', 'imgClick(this)');

document.body.append(img);

img.bordered{
  border: 3px solid pink;
}

РЕДАКТИРОВАТЬ 2:

Вы можете получить имя файла при его установке и обновить массив

// Initialize empty array
var myImages = [];
function imgClick(img) {
  // Add image file name to array after getting it from data attribute
  myImages.push(img.dataset.name);
  console.log(myImages);
}

function appendImage() {
  var img = document.createElement('img');
  var file = document.getElementById('file_in').files[0];
  var url = window.URL.createObjectURL(file);
  img.setAttribute('src', url);
  img.setAttribute('onclick', 'imgClick(this)');
  // Set the file name as a data attribute for later use
  img.dataset.name = file.name;

  document.body.append(img);
}

img.bordered {
  border: 3px solid pink;
}

<input type=file id="file_in" />
<button onclick="appendImage()">Upload</button>

Answer 5

Вместо добавления атрибута «onclick» я настоятельно рекомендую вам добавить прослушиватель событий в ваш элемент img.

image.addEventListener("click", imgClick);

Существует также проблема в вашей функции imgClick: вам не нужно искать там свой элемент img. Вместо этого вы можете добавить переменную события в объявление функции. Таким образом, вы можете получить цель событий и делать с ней все, что захотите:

function imgClick(event) {
    event.target.style.border='2px solid #33cc33';
}

Answer 6

установка onclick в качестве атрибута не будет устанавливать событие на изображении, которое вы назначаете при нажатии на изображение

image.onclick = imgclick