时间戳

首页 > 解决方案 > 为什么我的 JavaScript 不能与照片库一起使用？

javascript - 为什么我的 JavaScript 不能与照片库一起使用？

问题描述

我正在制作照片库，但无法切换照片。我不明白发生了什么事。我调试了我的代码，我收到了这个错误：

ncaught ReferenceError: myFunction 未在 HTMLImageElement.onclick 中定义

我需要做什么才能让我的画廊顺利运行？

我使用W3Schools作为我的参考，但我没有成功。

function myFunction(imgs){

  var mainImage = document.getElementById("mainImage");
  var caption = document.getElementById("caption");
  mainImage.src = imgs.src;
  caption.innerHTML = imgs.alt;
  mainImage.parentElement.style.display = "block";
}
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Photo Gallery</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>

<body>
    <div id="wrapper">
        <div class="row">
            <div class="col-12">
                <h1>Welcome to the Rainforest</h1>
            </div>
        </div>

        <!-- THUMBNAILS -->
        <div class="row">
            <div class="col-12">
                <div id="thumbnails">
                    <img src="img/pexels-alleksana-4239623.jpg" id="" width="19.375%" height="19.5%" alt="RainF1" onclick="myFunction(this);">
                    <img src="img/pexels-julia-volk-5769326.jpg" id="" width="19.375%" height="19.5%" alt="RainF2" onclick="myFunction(this);">
                    <img src="img/pexels-mikhail-nilov-6965505.jpg" id="" width="19.375%" height="19.5%" alt="RainF3" onclick="myFunction(this);" />
                    <img src="img/pexels-sakchai-ruenkam-6983731.jpg" id="" width="19.375%" height="19.5%" alt="RainF4" onclick="myFunction(this);" />
                    <img src="img/pexels-yan-krukov-5479919.jpg" id="" width="19.375%" height="19.5%" alt="RainF5" onclick="myFunction(this);"/>
                </div>
            </div>
        </div>

        <!-- EXPANDED IMG -->
        <div class="row">
            <div class="col-12">
                <div id="mainImage">
                    <img id="largeImage" src="img/pexels-alleksana-4239623.jpg" width="100%" height="100%" alt="">
                    <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
                </div>
            </div>
        </div>

        <!-- IMAGE TEXT -->
        <div class="row">
            <div class="col-12">
                <div class="caption">
                    <p id="caption"></p>
                </div>
            </div>
        </div>

</body>

</html>

标签： javascripthtmlcss

解决方案

首先，如果您在 HTML 内容中链接 JavaScript 文件。例如，

<script src="scripts.js"></script>

如果脚本需要在 DOM 加载之前执行函数，则需要将其放在结束<body>标记之前，否则将其放在 head 部分。

接下来，如果您还没有使用控制台，则需要在浏览器中打开调试控制台：

  • 窗户：F12, Ctrl+ Shift+I

  • Linux: F12, Ctrl+ Shift+I

  • macOS: F12, Cmd+ Shift+I

如何使用 JavaScript 调试控制台

打开控制台时，您可能会看到：

未捕获的语法错误：意外的标记“<”（在 Firefox 中）

之后，JavaScript 将忽略您的其余代码。

为什么您会收到此错误？

我不知道您是否在帖子中不小心将 HTML 放入 JavaScript 代码中，但如果那是您的真实代码，请将其删除。

毕竟，代码应该是这样的：

function myFunction(imgs) {
  let mainImage = document.getElementById("mainImage");
  let caption = document.getElementById("caption");
  mainImage.src = imgs.src;
  caption.innerHTML = imgs.alt;
  mainImage.parentElement.style.display = "block";
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Photo Gallery</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
  </head>
  <body>
  <div id="wrapper">
    <div class="row">
      <div class="col-12">
        <h1>Welcome to the Rainforest</h1>
      </div>
    </div>
    <!--THUMBNAILS-->
      <div class="row">
        <div class="col-12">
          <div id="thumbnails">
            <img src="img/pexels-alleksana-4239623.jpg" width="19.375%" height="19.5%" alt="RainF1" onclick="myFunction(this);">
            <img src="img/pexels-julia-volk-5769326.jpg" width="19.375%" height="19.5%" alt="RainF2" onclick="myFunction(this);">
            <img src="img/pexels-mikhail-nilov-6965505.jpg" width="19.375%" height="19.5%" alt="RainF3" onclick="myFunction(this);" />
            <img src="img/pexels-sakchai-ruenkam-6983731.jpg" width="19.375%" height="19.5%" alt="RainF4" onclick="myFunction(this);" />
            <img src="img/pexels-yan-krukov-5479919.jpg" id="" width="19.375%" height="19.5%" alt="RainF5" onclick="myFunction(this);"/>
          </div>
        </div>
      </div>
      <!--EXPANDED IMG-->
      <div class="row">
        <div class="col-12">
          <div id="mainImage">
            <img id="largeImage" src="img/pexels-alleksana-4239623.jpg" width="100%" height="100%" alt="">
            <span onclick="this.parentElement.style.display = 'none';" class="closebtn" style="cursor: pointer;">&times;</span>
           </div>
        </div>
      </div>
      <!--IMAGE TEXT-->
      <div class="row">
        <div class="col-12">
          <div class="caption">
            <p id="caption"></p>
          </div>
        </div>
      </div>
      </div>
    </body>
</html>

你很幸运，我注意到你在结束body标签</div>之前缺少一个 close ( ) 。我也解决了这个问题。

此外，您的 HTML 中不需要大量的空白。

您可以在MDN Web 文档中了解有关 JavaScript、HTML 和 CSS 的更多信息。

推荐阅读