Uncaught TypeError：displayFullで未定義のプロパティ 'src'を読み取ることができません

この宿題に問題があり、しばらく取り残されています。Uncaught TypeError：displayFullで未定義のプロパティ 'src'を読み取ることができません

Uncaught TypeError: Cannot read property 'src' of undefined at 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 

}

出典

2016-10-29 Web-Student214

fullpicは、それが "キー" は0、1、2、3などあるのです...あなたは、文字列引数でdisplayFullを呼び出し、それは0、1、2、配列ではありません3などです。たとえば、 'fullpic ['jhtp']'は定義されていません。 –

@PHPglue - いいえ、それは長さ6の新しい配列を作成しますが、要素はありません。 – nnnnnn

@ JaromandaXだから、HTMLで私はonclick = displayFull（fullpic []）を使うべきですか？ –

それはきれいで読みやすくするために、後述するように、あなたはこのような何かを単に行うことができます。必要なのは、すべての画像をマークアップの下に置いておくことだけです。

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; 
 
    } 
 
    }); 
 
}

<!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>

出典

2016-10-29 05:53:16 Sreekanth

Uncaught TypeError：displayFullで未定義のプロパティ 'src'を読み取ることができません

答えて

関連する問題