图像读取作为；“未定义”；通过JavaScript_Javascript_Google Chrome

图像读取作为；“未定义”；通过JavaScript

javascript google-chrome

图像读取作为；“未定义”；通过JavaScript,javascript,google-chrome,Javascript,Google Chrome,我为一幅图像测试了下面的代码，它成功了： let imageName1 = document.getElementById("the-edge"); imageName1.onclick = function(element) { // Create the link to be copied hyperlink = imageName1.alt imgOpen = "[img]" imgClose = "[/img]" link = imgO

我为一幅图像测试了下面的代码，它成功了：

  let imageName1 = document.getElementById("the-edge");

  imageName1.onclick = function(element) {

    // Create the link to be copied
    hyperlink = imageName1.alt
    imgOpen = "[img]"
    imgClose = "[/img]"
    link = imgOpen.concat(hyperlink, imgClose)

    // Create a dummy TextArea to copy text 
    var dummy = document.createElement("textarea")
    document.body.appendChild(dummy)
    dummy.value = link
    dummy.select()

    document.execCommand("copy")
    document.body.removeChild(dummy)
  };

现在我试着对三张图片进行一次点击

  let images = document.getElementsByTagName("img");
  console.log(images)

  for(var i = 0; i < images.length; i++) {
      images[i].onclick = function(element) {

      // Create the link to be copied
      hyperlink = images[i].alt // THROWS THE ERROR HERE
      imgOpen = "[img]"
      imgClose = "[/img]"
      link = imgOpen.concat(hyperlink, imgClose)

      // Create a dummy TextArea to copy text 
      var dummy = document.createElement("textarea")
      document.body.appendChild(dummy)
      dummy.value = link
      dummy.select()

      document.execCommand("copy")
      document.body.removeChild(dummy)

      }
  }

let images=document.getElementsByTagName（“img”）；
console.log（图像）
对于（var i=0；i


最后我得到了一个错误，uncaughttypeerror:无法读取未定义的属性'alt'
在第行hyperlink=images[i].alt

但它怎么可能是未定义的呢<代码>控制台日志（图像）

输出

HTMLCollection（3）
0:img#边缘
1:img#岩石
2：艾玛·斯通
长度：3
艾玛·斯通：艾玛·斯通
边缘：img#边缘
岩石：岩石
__协议：HTMLCollection

在进入

onclick

部分之前，我创建了一个单独的循环来存储

alt

，它确实没有定义，但为什么呢？图像是否具有

alt

？我是这样定义的。第一个代码成功了

发生此问题的原因是计数器

的上下文

调用onclick时，

的值为

，因此出现上述错误

另一个错误是函数onclick参数不是

元素

，而是

事件

要访问onclick函数中的元素，必须使用

event.target

正确的功能如下所示：

let images = document.getElementsByTagName("img");
console.log(images)
for (var i = 0; i < images.length; i++) {
    images[i].onclick = function (event) {
        // Create the link to be copied
        hyperlink = event.target.alt //EVENT.TARGET = ELEMENT

        imgOpen = "[img]"
        imgClose = "[/img]"
        link = imgOpen.concat(hyperlink, imgClose)
        console.log(link)


        // Create a dummy TextArea to copy text 
        var dummy = document.createElement("textarea")
        document.body.appendChild(dummy)
        dummy.value = link
        dummy.select()

        document.execCommand("copy")
        document.body.removeChild(dummy)

    }
}

<html>

<head></head>

<body>
    <img alt='teste 0' id="the-edge">
    <img alt='teste 1' id="the-rock">
    <img alt='teste 2' id="emma-stone">

</body>
<script>
    let images = document.getElementsByTagName("img");
    console.log(images)
    // image is one item of images
    for (let image of images) {
        //image is used by reference here. on updating image, you are updating too images[x]
        image.onclick = function (event) {
            // Create the link to be copied
            hyperlink = event.target.alt // THROWS THE ERROR HERE

            imgOpen = "[img]"
            imgClose = "[/img]"
            link = imgOpen.concat(hyperlink, imgClose)
            console.log(link)


            // Create a dummy TextArea to copy text 
            var dummy = document.createElement("textarea")
            document.body.appendChild(dummy)
            dummy.value = link
            dummy.select()

            document.execCommand("copy")
            document.body.removeChild(dummy)

        }
    }
</script>

</html>

let images=document.getElementsByTagName（“img”）；
console.log（图像）
对于（var i=0；i


编辑
做同样事情的另一种方法如下：
let images = document.getElementsByTagName("img");
console.log(images)
for (var i = 0; i < images.length; i++) {
    images[i].onclick = function (event) {
        // Create the link to be copied
        hyperlink = event.target.alt //EVENT.TARGET = ELEMENT

        imgOpen = "[img]"
        imgClose = "[/img]"
        link = imgOpen.concat(hyperlink, imgClose)
        console.log(link)


        // Create a dummy TextArea to copy text 
        var dummy = document.createElement("textarea")
        document.body.appendChild(dummy)
        dummy.value = link
        dummy.select()

        document.execCommand("copy")
        document.body.removeChild(dummy)

    }
}

<html>

<head></head>

<body>
    <img alt='teste 0' id="the-edge">
    <img alt='teste 1' id="the-rock">
    <img alt='teste 2' id="emma-stone">

</body>
<script>
    let images = document.getElementsByTagName("img");
    console.log(images)
    // image is one item of images
    for (let image of images) {
        //image is used by reference here. on updating image, you are updating too images[x]
        image.onclick = function (event) {
            // Create the link to be copied
            hyperlink = event.target.alt // THROWS THE ERROR HERE

            imgOpen = "[img]"
            imgClose = "[/img]"
            link = imgOpen.concat(hyperlink, imgClose)
            console.log(link)


            // Create a dummy TextArea to copy text 
            var dummy = document.createElement("textarea")
            document.body.appendChild(dummy)
            dummy.value = link
            dummy.select()

            document.execCommand("copy")
            document.body.removeChild(dummy)

        }
    }
</script>

</html>


让images=document.getElementsByTagName（“img”）；
console.log（图像）
//图像是图像的一项
for（让图像中的图像）{
//此处引用图像。更新图像时，您也在更新图像[x]
image.onclick=函数（事件）{
//创建要复制的链接
hyperlink=event.target.alt//在此处抛出错误
imgOpen=“[img]”
imgClose=“[/img]”
link=imgOpen.concat（超链接，imgClose）
console.log（链接）
//创建虚拟文本区域以复制文本
var dummy=document.createElement（“textarea”）
document.body.appendChild（虚拟）
dummy.value=链接
dummy.select（）
document.execCommand（“复制”）
document.body.removeChild（虚拟）
}
}

希望这有帮助
 为什么到了调用onclick的时候是3
？它不应该是0
？调用onclick
时，i
的值是3
，因为onclick
函数中的代码仅在触发单击时执行。如此之多，以至于如果您观察到，只有在触发单击时才会发生错误。在调用onclick
函数的此时，for

的

已经交互了3次，以创建每个图像的onclick
函数，i
的值已经是3
。因此，在onclick
函数的范围内使用i
并不有趣。感谢您的回复，Juliano。但是循环仍然是一样的；唯一改变的是我们现在使用了event.target.alt
。在你正确的解决方案中，i
不应该仍然是3
吗？嗨，乔西！事实上，问题的核心是i
的范围。如果我们在onclick
函数内打印i
，无论何时调用它，它都会打印值3
，因此我们不能在onclick
函数内使用i
。这是因为onclick
中的代码仅在触发单击时执行，也就是说，每当调用onclick
时，i
已经具有值3
。很难用文字来解释，不是吗？KKK你完全正确。如果我仍然在范围之外，为什么程序在你的代码中工作？