Separate the javascript script from the document, why doesn't it show the effect?

problem description: first of all, the code changes the preempted picture and text in real time by clicking the link, and then wants to separate the Js script in HTML, but the desired result is not achieved after the separation, and so is the other link point. Please help the gods to see what the problem is. Thank you in advance. The
code is as follows:

<!doctype html>
  <html lang="en">
    <head>
      <mate charset="utf-8">
      <title>Image Gallery</title>
      <link type="text/css" rel="stylesheet" href="layout.css">
    </head>
    <body>
      <h1>Snapshots</h1>
      
      <nav>
      <ul id="imagegallery">
    <li><a href="images/duorou.jpg"  title="A fireworks display">Fireworks</a></li>
    <li><a href="images/jinx.jpg"   title="A cup of black coffee">Coffee</a></li>
    <li><a href="images/jinx_pic.jpg"   title="A red,red rose">Rose</a></li>
    <li><a href="images/wandou.jpg"   title="The famous clock">Big Ben</a></li>
      </ul>
      </nav>
      <img id="placeholder" src="images/wandou.jpg" art="my image gallery">
      <p id="description">Choose an image.
      <a href="www.example.com" class="popup" title="web">Firefox</a>
      <script type="text/javascript" src="showPic.js"></script>
    </body>
  </html>

JavaScript script:

window.onload = prepareGallery;

function showPic(whichpic) {
    var source = whichpic.getAttribute("href");
    var placeholder = document.getElementById("placeholder");
    placeholder.setAttribute("src", source);
    var text = whichpic.getAttribute("title");
    var description = document.getElementById("description");
    description.firstChild.nodeValue = text;
}

function prepareGallery() {
    if (!document.getElementById || !document.getElementsByTagName) {
        return false;
    }
    if (!document.getElementById("imagegallery")) {
        return false;
    }
    var gallery = document.getElementById("imagegallery");
    var links = gallery.getElementsTagName("a");
    for (var i = 0; i < links.length; iPP) {
        links[i].onclick = function () {
            showPic(this);
            return false;
        }
    }
}

/*function countBodyChildren(){
var body_element=document.getElementsByTagName("body")[0];
alert(body_element.childNodes.length);
}
window.onload=countBodyChildren;*/

function popUp(winURL) {
    window.open(winURL, "popup", "width=320,height=480");
}

window.onload = prepareLinks;

function prepareLinks() {
    var link = document.getElementsByTagName("a");
    for (var i = 0; i < link.length; iPP) {
        if (link[i].getAttribute("class") == "popup";) {
            link[i].onclick = function () {
                popUp(this.getAttribute("href");
                    return false;
                }
            }
        }
    }