图片相册JavaScript交互异常，触发myFunction未定义报错如何解决？

问题根源&修复方案 #

1. 核心报错原因：JS函数未被HTML正确加载 #

报错ReferenceError: myFunction is not defined是因为你写的JavaScript代码没有引入到当前HTML页面中，浏览器点击触发事件时找不到对应的函数。
修复方法：
把你的JS代码用<script>标签包裹，放在HTML页面</body>结束标签的前面即可，不要放在<head>标签里，避免DOM未加载完成导致元素获取失败。如果你的JS是单独存为.js文件，就用<script src="你的JS文件路径"></script>引入，路径要和你实际存放位置对应。

2. 代码逻辑错误：DOM元素选择错误 #

你的JS代码里选中的mainImage是外层div的ID，并不是需要替换src的大图元素，直接给div设置src属性不会生效，会导致点击后大图不切换。
把JS代码里的元素选择逻辑修改为选中ID为largeImage的大图元素即可，修复后的JS代码如下：

function myFunction(imgs){
  // 修改为选中大图img元素
  var largeImage = document.getElementById("largeImage");
  var caption = document.getElementById("caption");
  largeImage.src = imgs.src;
  caption.innerHTML = imgs.alt;
  // 控制外层大图容器显示
  largeImage.parentElement.style.display = "block";
}

可选优化 #

如果需要页面加载时默认隐藏大图容器，只在点击缩略图后显示，可以在你的CSS文件中添加如下规则：

#mainImage {
  display: none;
  position: relative;
}
.closebtn {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 35px;
  color: #fff;
  cursor: pointer;
}

内容的提问来源于stack exchange，提问作者Jazzmine McLeod