title: Uncaught TypeError: Cannot read property 'src' of undefined at displayFull
body: <p>I am having trouble with this homework assignment and I have been stuck on it for a while. I am getting an error message saying </p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property 'src' of undefined at
    displayFull</p>
  </blockquote>
  
  <p>Any idea to fix this?</p>
  
  <p>The image folders and files are in the same folder, so the <code>src</code> is right. </p>
  
  <p><strong><em>HTML</em></strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;!-- Fig. 12.5: coverviewer.html --&gt;
  &lt;!-- Dynamic styles used for animation. --&gt;
  &lt;html&gt;
     &lt;head&gt;
        &lt;meta charset = "utf-8"&gt;
        &lt;title&gt;Deitel Book Cover Viewer&lt;/title&gt;
        &lt;link rel = "stylesheet" type = "text/css" href = "style.css"&gt;
        &lt;script src = "coverviewer.js"&gt;&lt;/script&gt;
     &lt;/head&gt;
  
     &lt;body&gt;
        &lt;div id = "mainimg"&gt;
           &lt;img id = "imgCover" src = "fullsize/jhtp.jpg" alt = "Full cover image"&gt;
        &lt;/div&gt;
        &lt;div id = "thumbs"&gt; // I AM GETTING THE ERROR MESSAGE HERE FOR EACH IMAGE ON CLICK AT WITH THE ONCLICK ATTRIBUTE
           &lt;img src = "thumbs/jhtp.jpg" id = "jhtp" alt = "Java How to Program cover" onclick = "displayFull('jhtp');"&gt;
           &lt;img src = "thumbs/iw3htp.jpg" id = "iw3htp" alt = "Internet &amp; World Wide Web How to Program cover" onclick = "displayFull('iw3htp');"&gt;
           &lt;img src = "thumbs/cpphtp.jpg" id = "cpphtp" alt = "C++ How to Program cover" onclick = "displayFull('cpphtp');"&gt;
           &lt;img src = "thumbs/jhtplov.jpg" id = "jhtplov" alt = "Java How to Program LOV cover" onclick = "displayFull('jhtplov');"&gt;
           &lt;img src = "thumbs/cpphtplov.jpg" id = "cpphtplov" alt = "C++ How to Program LOV cover" onclick = "displayFull('cpphtplov');"&gt;
           &lt;img src = "thumbs/vcsharphtp.jpg" id = "vcsharphtp" alt = "Visual C# How to Program cover" onclick = "displayFull('vcsharphtp');"&gt;
        &lt;/div&gt;
  
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong><em>JAVASCRIPT</em></strong></p>
  
  <pre><code>var fullpic = new Array(6);
  
  //define each array element as an image
  for (var i=0;i&lt;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 
  
  }
  </code></pre>