无法修改HTML/CSS时，缩略图点击放大及标题同步问题排查

我帮你梳理了代码里导致功能失效的几个核心问题，下面是具体分析和修正后的完整代码：

关键问题点 #

• DOM未加载完成就执行脚本：你的JS代码放在<head>标签里，此时页面中的<div id="thumbnails">、<figure id="featured">等元素还没被浏览器渲染，调用getElementById会返回null，直接导致事件绑定失败。
• 元素选择错误：HTML里的<figcaption>并没有设置id="figcaption"，所以document.getElementById("figcaption")根本找不到目标元素。
• 事件名称书写错误：监听鼠标事件时，应该使用原生事件名mouseover和mouseout，而非带on前缀的onmouseover/onmouseout。
• 方法调用遗漏括号：nodeName.toLowerCase是一个方法，必须加上括号()才能执行并返回字符串，否则你是在把函数对象和"img"做比较，永远不会匹配成功。

修正后的完整代码 #

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8">
    <title>Chapter 9 - Share Your Travels</title>
    <link rel="stylesheet" href="css/styles.css" />
</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 id="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>
    <script type="text/javascript">
        // 给thumbnails绑定点击事件
        document.getElementById("thumbnails").addEventListener("click", function(e) {
            // 修正：调用toLowerCase()方法
            if(e.target && e.target.nodeName.toLowerCase() == "img") {
                // 替换small为medium，获取中等尺寸图片地址
                var srcValue = e.target.src.replace("small","medium");
                // 获取缩略图的title
                var titleValue = e.target.title;
                // 更新主图的src和title
                document.getElementById("featured").querySelector("img").src = srcValue;
                document.getElementById("featured").querySelector("img").title = titleValue;
                // 更新figcaption的文本
                document.getElementById("figcaption").innerHTML = titleValue;
            }
        });

        // 修正：使用正确的事件名mouseover/mouseout
        document.getElementById("figcaption").addEventListener("mouseover", function(e) {
            e.target.style.opacity = .8;
        });

        document.getElementById("figcaption").addEventListener("mouseout", function(e) {
            e.target.style.opacity = 1; // 改成1避免标题完全透明不可见
        });
    </script>
</body>
</html>

额外说明 #

1. 我给<figcaption>添加了id="figcaption"，让你原来的选择器能正常工作；
2. 更新主图时，用document.getElementById("featured").querySelector("img")获取主图元素——之前直接给<figure>设置src是无效的，因为它不是图片元素；
3. mouseout时把opacity设为1，避免标题完全消失，更符合常规用户体验；
4. 把JS脚本移到了</body>标签之前，确保DOM所有元素都加载完成后再执行脚本，彻底解决找不到元素的问题。

内容的提问来源于stack exchange，提问作者Roberto A. Hernandez