JavaScript事件处理程序单击缩略图以放大图像_Javascript_Html

JavaScript事件处理程序单击缩略图以放大图像

javascript html

JavaScript事件处理程序单击缩略图以放大图像,javascript,html,Javascript,Html,所以我对网页设计非常陌生，我的点击事件处理程序无法正常工作。我无法更改html或css文件。我的任务是为我的缩略图设置一个单击处理程序，以便在元素中放大img中的图像。同时还将图中的figcaption文本设置为thumbs title属性。我需要附加到div id=缩略图。我的脚本没有放大我的缩略图或标题这是我创建的HTML文档： <!DOCTYPE html> <html lang="en"> <head >

所以我对网页设计非常陌生，我的点击事件处理程序无法正常工作。我无法更改html或css文件。我的任务是为我的缩略图设置一个单击处理程序，以便在

元素中放大img中的图像。同时还将图中的figcaption文本设置为thumbs title属性。我需要附加到div id=缩略图。我的脚本没有放大我的缩略图或标题

这是我创建的HTML文档：

        <!DOCTYPE html>
        <html lang="en">
        <head >
        <meta charset="utf-8">
        <title>Chapter 9 - Share Your Travels</title>
        <link rel="stylesheet" href="css/styles.css" />
        <script type="text/javascript" src="js/chapter09-project02.js">
        </script>   
`      `</head>
        <body>
        <header>
        <h2>Share Your Travels</h2>
        <nav><img src="images/menu.png"></nav>
        </header>
        <main>
        <figure id="featured">
        <img src="images/medium/5855774224.jpg" title="Battle" />
        <figcaption>Battle</figcaption>
        </figure>
        <div id="thumbnails">
        <img src="images/small/5855774224.jpg" title="Battle"/>
        <img src="images/small/5856697109.jpg" title="Luneburg"/>
        <img src="images/small/6119130918.jpg" title="Bermuda" />
        <img src="images/small/8711645510.jpg" title="Athens" />
        <img src="images/small/9504449928.jpg" title="Florence" />
        </div>

        </main>
        </body>
        </html>

谢谢你的建议，希望我能为其他人支付

我认为这是问题的根源。JS是getElementById，但没有ID是call figcaption

var img = document.getElementById("figcaption");

问题是您试图使用

getElementById

查找id为

figcaption

的内容；页面上没有id为

figcaption

，因此

getElementById

null

有几种方法可以解决此问题：

将id添加到
元素：

使用

getElementsByTagName

而不是使用

getElementById

：

document.getElementsByTagName（'figcaption'）[0]。（getElementsByTagName
始终返回元素的集合，[0]
获取集合中的第一个元素，在本例中仅获取其中一个）


不要使用getElementById
，而是像查找特征图像元素那样使用querySelector
：document.querySelector（“特征figcaption”）


在这种情况下，我推荐最后一种使用querySelector
的方法；其他时候，最好向元素添加一个id

const thumbs=document.getElementById（“缩略图”）；
const featuredImage=document.querySelector（“特色img”）；
const caption=document.querySelector（“特色figcaption”）；
thumbs.addEventListener（“单击”，函数（e）{
if（e.target.nodeName.toLowerCase（）='img'）{
var clickedImageSource=e.target.src；
//在本演示中，我使用了一个占位符
//图像服务，所以我需要改变大小略有不同
让newSrc=单击edimagesource.replace（“50x50”、“350x150”）；
//var newSrc=单击图像源。替换（“小型”、“中型”）；
featuredImage.src=newSrc；
caption.textContent=e.target.title；
}
});
标题.addEventListener（“鼠标悬停”，函数（事件）{
caption.className=“特色figcaption”；
});
标题.addEventListener（“鼠标出”，函数（事件）{
caption.className=“特色figcaption”；
//我将值改为.5而不是.9，因为
//文本不透明度的变化几乎无法察觉。
caption.style.opacity=“0.5”；
//这是不需要的，这是以前的做法，
//IE<9需要它，但IE<9不再相关。只需使用不透明度。
//element.style.filter='alpha（不透明度=0%）'；
});

分享你的旅行
战争
控制台中的错误？您的事件处理程序看起来正常，可能问题在于加载脚本的时间-如果在头部加载“Js脚本”，它将无法工作，因为缩略图div还不存在。但您会看到控制台错误。
var img = document.getElementById("figcaption");