不要在html的标签上出现javascript代码，实现javascript代码与html分离

html代码：

<code>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;title&gt;Image Gallery&lt;/title&gt;
    &lt;body&gt;
        &lt;h1&gt;Snapshots&lt;/h1&gt;
        &lt;ul id=&quot;showPicGallery&quot;&gt;
          &lt;li&gt;
            &lt;a href=&quot;images/fireworks.jpg&quot; title=&quot;A fireworks display&quot;&gt;Fireworks&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href=&quot;images/coffee.jpg&quot; title=&quot;A cup of black coffee&quot; &gt;Coffee&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href=&quot;images/rose.jpg&quot; title=&quot;A red, red rose&quot; &gt;Rose&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href=&quot;images/bigben.jpg&quot; title=&quot;The famous clock&quot; &gt;Big Ben&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
        &lt;img  id=&quot;placeholder&quot;  src=&quot;images/placeholder.gif&quot; alt=&quot;my image gallery&quot;/&gt;
        &lt;p id=&quot;description&quot;&gt;Choose an images&lt;/p&gt;
        &lt;a href=&quot;https://baidu.com&quot; class=&quot;popup&quot;&gt;Example&lt;/a&gt;
        &lt;script src=&quot;./jas.js&quot;/&gt;
    &lt;/body&gt;
&lt;/html&gt;</code>

javascript代码：

<code>window.onload = function(){
    prepareLinks();
    handlePic();
}

function showPic (whichpic) {
   var url = whichpic.getAttribute(&quot;href&quot;);
   var title = whichpic.getAttribute(&quot;title&quot;);
   var aElement = document.getElementById(&quot;placeholder&quot;);
   var pElement = document.getElementById(&quot;description&quot;);
   aElement.setAttribute(&quot;src&quot;,url);
   //pElement.childNodes[0].nodeValue = title;
   pElement.firstChild.nodeValue = title;
   //alert(pElement.firstChild.nodeValue)
}

function handlePic(){
    var ulElement =  document.getElementById(&quot;showPicGallery&quot;);
    var aTagArray = ulElement.getElementsByTagName(&quot;a&quot;);
    for(var i= 0 ; i &lt; aTagArray.length; i++){
        aTagArray[i].onclick = function(){
            showPic(this);
            return false;
        }
    }
}</code>

上边的window.onload处理函数还有改进的地方，目前的方法只是适合绑定函数少的情况。如果需要绑定很多个函数，且扩展性好的话，改进如下：

编写一个额外的，一劳永逸的代码：

<code>//有多少个函数需要加载，只需要添加这一行代码即可
addLoadEvent(handlePic);
addLoadEvent(prepareLinks);

function addLoadEvent(fuc){
    var oldOnlodEvent =  window.onload;
    if(typeof window.onload != &quot;function&quot;){
    //如果处理函数上还没有绑定有函数，就像平时那样把新函数添加给它。
        window.onload = fuc;
    }else{
    //如果处理函数上已经绑定有函数，就把新函数添追加到加到现有指令的末尾。
        window.onload = function(){
            oldOnlodEvent();
            fuc();
        }
    }
}</code>

添加样式效果图：

html代码：

<code>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;title&gt;Image Gallery&lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/layout.css&quot; media=&quot;screen&quot;/&gt;
    &lt;body&gt;
        &lt;h1&gt;Snapshots&lt;/h1&gt;
        &lt;ul id=&quot;showPicGallery&quot;&gt;
          &lt;li&gt;
            &lt;a href=&quot;images/fireworks.jpg&quot; title=&quot;A fireworks display&quot;&gt;
                &lt;img src=&quot;images/fireworks.jpg&quot; alt=&quot;Fireworks&quot;/&gt;
            &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href=&quot;images/coffee.jpg&quot; title=&quot;A cup of black coffee&quot; &gt;
                &lt;img src=&quot;images/coffee.jpg&quot; alt=&quot;Coffee&quot;/&gt;
            &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href=&quot;images/rose.jpg&quot; title=&quot;A red, red rose&quot; &gt;
                &lt;img src=&quot;images/rose.jpg&quot; alt=&quot;Rose&quot;/&gt;
            &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href=&quot;images/bigben.jpg&quot; title=&quot;The famous clock&quot; &gt;
                &lt;img src=&quot;images/bigben.jpg&quot; alt=&quot;Bigben&quot;/&gt;
            &lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
        &lt;img  id=&quot;placeholder&quot;  src=&quot;images/placeholder.gif&quot; alt=&quot;my image gallery&quot;/&gt;
        &lt;p id=&quot;description&quot;&gt;Choose an images&lt;/p&gt;
        &lt;a href=&quot;https://baidu.com&quot; class=&quot;popup&quot;&gt;Example&lt;/a&gt;
        &lt;script src=&quot;./jas.js&quot;/&gt;
    &lt;/body&gt;
&lt;/html&gt;</code>

css代码：

<code>body{
    font-family: &quot;Heletica&quot;,&quot;Arial&quot;,serif;
    color: #333;
    background-color: #ccc;
    margin: 1em 10%;
}

h1{
    color: #333;
    background-color: transparent;
}

a{
    color: #c60;
    background-color: transparent;
    font-weight: bold;
    text-decoration: none;
}

#showPicGallery{
    list-style: none;
}

#showPicGallery li {
   display: inline;
}

#showPicGallery li a img{
    width: 200px;
    height: 200px;
    border: 0;
}

ul{
    padding: 0;
}

li{
    float: left;
    padding: 1em;
    list-style: none;
}</code>