尝试在用户单击图像时显示替代文本

Question

我可能在这里遗漏了一些非常重要的东西，但我一直在处理这段代码，而且我一遍又一遍地陷入同样的错误——我不确定我做错了什么。

这是我的 HTML

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Images to Text</title>
    <link rel="stylesheet" href="styles.css" type="text/css"/>
  </head>
  <body>
    <h1>Some of my Favorite Animals.</h1>
        <h2>Capybara & Mantis Shrimp</h2>
        <div id='showAlt'>
            <img src="capybaraman.jpg" height="190" alt="A picture of a capybara in the arms of a man, showing that they are about the size of dogs but look comparable to guinea pigs.">
            <img src="capybaramonkey.jpg" width="300" alt="A picture of a capybara with monkeys petting and on top of the capybara.">
            <img src="capybarabird.png" width="300" alt="A picture of a capybara laying in the mud. There is also a bird sitting on top of them.">
            <img src="mantisshrimp.jpg" width="300" alt="A picture of a mantis shrimp with its' arms open, they are rainbow with large eyes. They have small wing-like structures coming from the sides of their bodies.">
            <img src="mantisbody.jpg" width="230" alt="A picture showing the mantis shrimp's body, it is long and looks like a lobster's tail with the same texture.">
            <img src="mantisclose.jpg" width="300" alt="A picture close up to a mantis shrimp's face, you can see their large eyes and their 'mouth'.">
        </div>
        <div id="clickToShow"></div>
        
        <script src="imagetotext.js"></script>
    </body>
</html>

这是我的 JavaScript

let altText = document.getElementById('clickToShow');
let clicker = document.getElementById('showAlt');

for (let x = 0; x < document.images.length; x++) {
    altText[x].addEventListener('click', imageToText);
}

function imageToText() {
    let clickImage = this.alt;
    clicker.textContent = clickImage;
}

每次用户单击图像时，我都试图添加一个 for 循环，它会显示其替代文本，但我不断收到错误消息，说它无法读取未定义的 imageToText 的属性 addEventListener。 我认为这可能是 HTML 中的 JS 太高了，因为它是未定义的，但即使在将我的脚本标签向下移动之后，这种情况仍然存在。 我还想使用事件监听器标签——我还没学过 jQuery。 任何帮助都会很棒。 我现在感觉被我的代码卡住了。

Answer 1

每次用户单击图像时，我都试图添加一个 for 循环

然后将事件侦听器添加到每个图像 - 您当前正在尝试将点击侦听器添加到altText[x] ，但altText是单个元素，一个<div> - 它不是一个集合。

你也可能不想清除包含图像的#showAlt div，因为那样它们都会消失 - 你想将它添加到另一个 div 吗？

for (const img of document.querySelectorAll('img')) {
  img.addEventListener('click', imageToText);
}
function imageToText() {
    altText.textContent = this.alt;
}

Answer 2

这是错误

for (let x = 0; x < document.images.length; x++) {
    altText[x].addEventListener('click', imageToText);
}

你从 document.getElementById('clickToShow'); 得到 altText； 正确的？

里面，没有数组，这就是为什么 addEventListener 无法读取它

将其更改为：

for (let x = 0; x < document.images.length; x++) {
    clicker[x].addEventListener('click', imageToText);
}

并将其更改为

function imageToText() {
    let clickImage = this.alt;
    altText.textContent = clickImage;
}

尝试在用户单击图像时显示替代文本

问题描述

2 个解决方案

解决方案1
0 2021-03-21 23:48:40

解决方案2
0 2021-03-22 00:05:08

尝试在用户单击图像时显示替代文本

问题描述

2 个解决方案

解决方案1 0 2021-03-21 23:48:40

解决方案2 0 2021-03-22 00:05:08

解决方案1
0 2021-03-21 23:48:40

解决方案2
0 2021-03-22 00:05:08