JavaScript 圖片切換報錯 ReferenceError: whichpic is not defined 完整修復

錯誤現場

代碼意圖：點擊縮略圖鏈接，切換大圖 src。運行報錯 ReferenceError: whichpic is not defined，且代碼格式混亂（函數體缺少大括號、語句未分號結尾、HTML/JS 混寫）。

核心問題

1. 函數定義語法錯誤：function showPic(whichpic) whichpic.getAttribute("href"); 缺少 { }，導致參數 whichpic 未進入作用域，後續引用報未定義。
2. 事件綁定缺失：HTML <a> 標籤未綁定 onclick="showPic(this)"，無法傳遞點擊元素。
3. 腳本執行時機：<script> 置於 </html> 之後，瀏覽器可能不執行；應放在 </body> 前或加 defer。

修復後完整代碼

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Images Gallery</title>
  <style> #placeholder { max-width: 100%; height: auto; } </style>
</head>
<body>
  <h1>Snapshots</h1>
  <ul id="thumbs">
    <li><a href="images/A1.jpg" title="A fireworks display" onclick="showPic(this); return false;">Fireworks</a></li>
    <li><a href="images/A2.jpg" title="A cup of black coffee" onclick="showPic(this); return false;">Coffee</a></li>
    <li><a href="images/A3.jpg" title="A red, red rose" onclick="showPic(this); return false;">Rose</a></li>
    <li><a href="images/A4.jpg" title="The famous clock" onclick="showPic(this); return false;">Big Ben</a></li>
  </ul>
  <img src="images/A5.jpg" id="placeholder" alt="my image gallery">

  <script>
    function showPic(whichpic) {
      if (!whichpic) return;
      var source = whichpic.getAttribute("href");
      var placeholder = document.getElementById("placeholder");
      if (placeholder) placeholder.setAttribute("src", source);
      return false; // 阻止鏈接跳轉
    }
  </script>
</body>
</html>

進階優化（事件委託 + 現代寫法）

<script>
document.getElementById('thumbs').addEventListener('click', function(e) {
  var link = e.target.closest('a');
  if (link) {
    e.preventDefault();
    document.getElementById('placeholder').src = link.href;
  }
});
</script>

修復核心：**函數體加大括號、綁定 onclick 傳 this、腳本放 body 末尾**。現代寫法推薦事件委託，分離結構與行為，更易維護。