why the onclick event doen't work from an external .js file?
<p>I have wrote a .js file in wich I have create a table, buttons, etc. My aplication is a photo album and everything is created on this file, the html build up properly with all the buttons but when I give click on the buttons, the buttons don't change the images. </p>

<p>The code of the .jp file is:</p>

<pre><code>var dp = document.createElement("img");
function changeImage()
{

    var list = document.getElementById('optionlist');
    dp.src = list.options[list.selectedIndex].value;
        alert(dp.src);
}

function prevImage()
{
    var list = document.getElementById('optionlist');
        alert("Llega a prev");
    if(list.selectedIndex == 0)
    {
        list.selectedIndex = list.options.length-1;
    }
    else
    {
        list.selectedIndex--;
    }
    changeImage();
}

function firstImage()
{
    var list = document.getElementById('optionlist');

        list.selectedIndex = 0;

    changeImage();
}

function nextImage()
{
    var list = document.getElementById('optionlist');
    if(list.selectedIndex == list.options.length-1)
    {
        list.selectedIndex = 0;
    }
    else
    {
        list.selectedIndex++;
    }
    changeImage();
}

function lastImage()
{


    var list = document.getElementById('optionlist');

        list.selectedIndex = 9;

    changeImage();
}


function start() {

        var txt1,txt2,txt3,txt4,txt5,txt6,txt7,txt8,txt9,txt10,txt11;    



        //get the reference for the body
        var body = document.getElementsByTagName("body")[0];

        //alert("creates a &lt;table&gt; element and a &lt;tbody&gt; element");
        var tbl  = document.createElement("table");
        tbl.setAttribute("align","center");
        tbl.setAttribute("border","0");

        var tbl2  = document.createElement("table");
        tbl2.setAttribute("align","center");
        tbl2.setAttribute("border","0");

        var tblBody = document.createElement("tbody");
        var tblBody2 = document.createElement("tbody");

        //alert("creating &lt;p&gt;");
        txt11 = document.createTextNode(" JavaScript Module ");
        var downtxt = document.createElement("p");
        downtxt.setAttribute("align","center");
        downtxt.appendChild(txt11);


        //alert("creates &lt;input&gt; elements");
        var first = document.createElement("input");  
        first.setAttribute("value", "  &lt;&lt;  ");  
        first.setAttribute("type", "button"); 
        first.onClick = firstImage; 

        var previous = document.createElement("input");    
        previous.setAttribute("type", "button");
        previous.setAttribute("value", "   &lt;   "); 
        previous.onClick = "JavaScript:prevImage()";

        var last = document.createElement("input");  
        last.setAttribute("value", "  &gt;&gt;  ");  
        last.setAttribute("type", "button"); 


        last.onClick =  "JavaScript:lastImage()";


        var next = document.createElement("input");  
        next.setAttribute("value", "   &gt;   ");  
        next.setAttribute("type", "button"); 
        next.onClick = "JavaScript:nextImage()";

        //alert("creating images options and &lt;select&gt;");
        var op1 = document.createElement("option");
        var op2 = document.createElement("option");
        var op3 = document.createElement("option");
        var op4 = document.createElement("option");
        var op5 = document.createElement("option");
        var op6 = document.createElement("option");
        var op7 = document.createElement("option");
        var op8 = document.createElement("option");
        var op9 = document.createElement("option");
        var op10 = document.createElement("option");


        op1.setAttribute("value","1.jpg");
        txt1 = document.createTextNode("First Image");
        op1.appendChild(txt1);

        op2.setAttribute("value","2.jpg");
        txt2 = document.createTextNode("Second Image");
        op2.appendChild(txt2);

        op3.setAttribute("value","3.jpg");
        txt3 = document.createTextNode("Third Image");
        op3.appendChild(txt3);

        op4.setAttribute("value","4.jpg");
        txt4 = document.createTextNode("Fourth Image");
        op4.appendChild(txt4);

        op5.setAttribute("value","5.jpg");
        txt5 = document.createTextNode("Fifth Image");
        op5.appendChild(txt5);

        op6.setAttribute("value","6.jpg");;
        txt6 = document.createTextNode("Sixth Image");
        op6.appendChild(txt6);

        op7.setAttribute("value","7.jpg");
        txt7 = document.createTextNode("Seventh Image");
        op7.appendChild(txt7);

        op8.setAttribute("value","8.jpg");
        txt8 = document.createTextNode("Eight Image");
        op8.appendChild(txt8);

        op9.setAttribute("value","9.jpg");
        txt9 = document.createTextNode("Ninth Image");
        op9.appendChild(txt9);

        op10.setAttribute("value","10.jpg");
        txt10 = document.createTextNode("Tenth Image");
        op10.appendChild(txt10);

        var slct = document.createElement("select");
        slct.setAttribute("id","optionlist");
        slct.onChange = changeImage;

        slct.appendChild(op1);
        slct.appendChild(op2);
        slct.appendChild(op3);
        slct.appendChild(op4);
        slct.appendChild(op5);
        slct.appendChild(op6);
        slct.appendChild(op7);
        slct.appendChild(op8);
        slct.appendChild(op9);
        slct.appendChild(op10);

        //alert("Creating rows and columns for the tables");

        var td1 = document.createElement("td");
        td1.setAttribute("align","center");
        td1.setAttribute("colspan","3");         

        dp.setAttribute("name","mainimage");
        dp.setAttribute("border","1");
        dp.setAttribute("align","center");

        td1.appendChild(dp);

        var tr1 = document.createElement("tr");
        tr1.setAttribute("align","center");
        tr1.appendChild(td1);


        var td2 = document.createElement("td");
        td2.setAttribute("align","left");
        td2.appendChild(first);
        td2.appendChild(previous);

        var td3 = document.createElement("td");
        td3.setAttribute("align","center");
        td3.appendChild(slct);

        var td4 = document.createElement("td");
        td4.setAttribute("align","right");
        td4.appendChild(next);
        td4.appendChild(last);

        var tr2 = document.createElement("tr");
        tr2.appendChild(td2);
        tr2.appendChild(td3);
        tr2.appendChild(td4);


        //alert("adding all the elements to the table");
        tblBody2.appendChild(tr1);
        tblBody.appendChild(tr2);

        tbl2.appendChild(tblBody2);
        tbl.appendChild(tblBody);


        //alert("adding table to &lt;body&gt;");
        body.appendChild(tbl2);
        body.appendChild(tbl);
        body.appendChild(downtxt);
        changeImage();


}
</code></pre>

<p>and the html code is:</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Photo Album &lt;/title&gt;
&lt;style&gt;


p, td {color:blue;font-family:verdana;font-size:8pt}
h1 {color:black;font-family:verdana;font-size:14pt}
&lt;/style&gt;
&lt;script type = "text/javascript" src = "PAScript.js" language = "javascript"&gt;


&lt;/script&gt;
&lt;/head&gt;
&lt;body onLoad="start()" bgcolor = "grey"&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>It somebody can help me please, I don't have idea how to make work the buttons of my application</p>

<p>Thanks</p>
