正在尝试添加属性"；onclick"；到一个html“；img"；由javascript函数创建的元素

这是创建包含图像和用户插入的图像名称的表的函数的一部分

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);

 function imgClick(img) {

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

现在，如果点击图像，我想调用这个函数。此函数用于显示用户单击的图像周围的边框

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);

 function imgClick(img) {

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

它将img clicked id atributte与其他图像id进行比较，当它等于时，将显示存储在数组中的文件名 名称文件

---

for（var i=0；isetting
onclick
as属性将不会设置已将onclick分配给image的图像上的事件

image.onclick = imgclick

我强烈建议您在img元素中添加一个事件侦听器，而不是添加一个“onclick”属性

image.addEventListener("click", imgClick);

imgClick
函数中还有一个问题：您不需要在其中查找img元素。您可以将事件变量添加到函数声明中。这样，您就可以检索事件目标并对其执行任何操作：

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

问题主要在于这一行：

var imgTag=document.getElementsByTagName（'img'）；

as
document.getElementsByTagName（'img'）；
返回一个HTMLCollection而不是单个元素。因此，当您尝试设置样式属性时，您是在HTMLCollection而不是在实际节点上进行设置

请尝试以下方法：


函数imgClick（img）{
img.style.border='5px纯红'；
}
var img=document.createElement（'img'）；
img.setAttribute（'src'，'http://placehold.it/200/200/pink/black');
setAttribute（'onclick'，'imgClick（this）'）；
document.body.append（img）；
如果要设置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';
    }
}

或

您可以使用
event.target
访问单击的项目，如下所示：

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

和绑定事件，如下所示（正如您在代码中所做的）：

或使用：

请注意，
var imgTag=document.getElementsByTagName（'img'）
返回找到的项/节点的数组（like），因此
imgTag.style…
将不起作用。
还可以使用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>


函数createImg（src、身高、体重、onclick）{
const img=新图像（身高、体重）
img.src=src
img.onclick=onclick
返回img
}
函数addNewImage（图像）{
图库.附加子对象（图像）
}
函数handleClick（）{
警报（'图像捕获单击事件！'）
}
常数src=https://loremflickr.com/320/240'
常量img1=createImg（src，100100，handleClick）
addNewImage（img1）
直接设置属性
image.onclick=imgClick
它就像一个符咒，现在如果我想在第二次单击时擦除边框，我该怎么做？有很多方法可以做到这一点。我用一种方法更新了答案。再问一个小问题，我有一个数组（var NameFile=[]；）它存储文件名，我想显示单击图像的文件名，如何访问它，我尝试使用“（函数imgClick（img，NameFile）alert（img.NameFile）；）但是它显示了未定义，我如何才能做到这一点。提前感谢。你说的文件名是什么意思？你可以从
src
访问用于访问图像的URL。文件名是URL的一部分吗？如果没有帮助，请随时回来。用户通过输入按钮插入图像，该图像有名称，这就是文件名。我看了一下你发送的内容，它包含了图片的url，在这个例子中是mac地址，因为我使用的是mac
image.onclick = imgClick;

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

<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>