Question

我在完成这项家庭作业时遇到了麻烦，我已经坚持了一段时间。我收到一条错误消息

未捕获的TypeError：无法读取未定义的属性'src' displayFull

有什么想法解决这个问题吗？

图像文件夹和文件位于同一文件夹中，因此src是正确的。

HTML

<!DOCTYPE html>

<!-- Fig. 12.5: coverviewer.html -->
<!-- Dynamic styles used for animation. -->
<html>
   <head>
      <meta charset = "utf-8">
      <title>Deitel Book Cover Viewer</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css">
      <script src = "coverviewer.js"></script>
   </head>

   <body>
      <div id = "mainimg">
         <img id = "imgCover" src = "fullsize/jhtp.jpg" alt = "Full cover image">
      </div>
      <div id = "thumbs"> // I AM GETTING THE ERROR MESSAGE HERE FOR EACH IMAGE ON CLICK AT WITH THE ONCLICK ATTRIBUTE
         <img src = "thumbs/jhtp.jpg" id = "jhtp" alt = "Java How to Program cover" onclick = "displayFull('jhtp');">
         <img src = "thumbs/iw3htp.jpg" id = "iw3htp" alt = "Internet & World Wide Web How to Program cover" onclick = "displayFull('iw3htp');">
         <img src = "thumbs/cpphtp.jpg" id = "cpphtp" alt = "C++ How to Program cover" onclick = "displayFull('cpphtp');">
         <img src = "thumbs/jhtplov.jpg" id = "jhtplov" alt = "Java How to Program LOV cover" onclick = "displayFull('jhtplov');">
         <img src = "thumbs/cpphtplov.jpg" id = "cpphtplov" alt = "C++ How to Program LOV cover" onclick = "displayFull('cpphtplov');">
         <img src = "thumbs/vcsharphtp.jpg" id = "vcsharphtp" alt = "Visual C# How to Program cover" onclick = "displayFull('vcsharphtp');">
      </div>

   </body>
</html>

JAVASCRIPT

var fullpic = new Array(6);

//define each array element as an image
for (var i=0;i<fullpic.length;i++)
    fullpic[i] = new Image(289,373);

//give the path to the src properties of the array elements
fullpic[0].src = "fullsize/jhtp.jpg";
fullpic[0].alt = "Java How to Program";
fullpic[1].src = "fullsize/iw3htp.jpg";
fullpic[2].src = "fullsize/cpphtp.jpg"; 
fullpic[3].src = "fullsize/jhtplov.jpg";
fullpic[4].src = "fullsize/cpphtplov.jpg";
fullpic[5].src = "fullsize/vcsharphtp.jpg";

/*function displayFull(title){
    document.getElementById("imgCover").src="fullsize/"+title+".jpg";

}*/

function displayFull(i){
    document.getElementById("imgCover").src=fullpic[i].src; // I AM GETTING THE ERROR MESSAGE HERE 

}

Answer 1

为了使其更清晰和可读，您可以像下面提到的那样做这样的事情。您只需要在标记中包含所有图像。

＆＃13;

window.onload = function() {
  document.querySelector("#thumbs").addEventListener("click", function(event) {

    if (event.target.tagName.toLowerCase() === "img") {
      var title = event.target.getAttribute("id"),
        imgSrc = "fullsize/" + title + ".jpg",
        imgElement = document.querySelector("#imgCover");

      imgElement.src = imgSrc;
      imgElement.alt = imgSrc;
    }
  });
}

＆＃13;

<!DOCTYPE html>

<!-- Fig. 12.5: coverviewer.html -->
<!-- Dynamic styles used for animation. -->
<html>

<head>
  <meta charset="utf-8">
  <title>Deitel Book Cover Viewer</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="coverviewer.js"></script>
</head>

<body>
  <div id="mainimg">
    <img id="imgCover" src="fullsize/jhtp.jpg" alt="Full cover image">
  </div>
  <div id="thumbs">// I AM GETTING THE ERROR MESSAGE HERE FOR EACH IMAGE ON CLICK AT WITH THE ONCLICK ATTRIBUTE
    <img src="thumbs/jhtp.jpg" id="jhtp" alt="Java How to Program cover">
    <img src="thumbs/iw3htp.jpg" id="iw3htp" alt="Internet & World Wide Web How to Program cover">
    <img src="thumbs/cpphtp.jpg" id="cpphtp" alt="C++ How to Program cover">
    <img src="thumbs/jhtplov.jpg" id="jhtplov" alt="Java How to Program LOV cover">
    <img src="thumbs/cpphtplov.jpg" id="cpphtplov" alt="C++ How to Program LOV cover">
    <img src="thumbs/vcsharphtp.jpg" id="vcsharphtp" alt="Visual C# How to Program cover">
  </div>
</body>

</html>

＆＃13;

未捕获的TypeError：无法在displayFull中读取未定义的属性'src'

1 个答案: