为什么onclick事件在外部.js文件中不起作用？

Question

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.

The code of the .jp file is:

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 <table> element and a <tbody> 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 <p>");
        txt11 = document.createTextNode(" JavaScript Module ");
        var downtxt = document.createElement("p");
        downtxt.setAttribute("align","center");
        downtxt.appendChild(txt11);


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

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

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


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


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

        //alert("creating images options and <select>");
        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 <body>");
        body.appendChild(tbl2);
        body.appendChild(tbl);
        body.appendChild(downtxt);
        changeImage();


}

and the html code is:

<html>
<head>
<title>Photo Album </title>
<style>


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


</script>
</head>
<body onLoad="start()" bgcolor = "grey">

</body>
</html>

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

Thanks

Answer 1

When you're setting onclick by javascript, it's a function reference instead of a string.

previous.onClick = "JavaScript:prevImage()";

should be

previous.onclick = prevImage;

Fix your other assignments to follow this pattern. Also onclick is all lower case and is case sensitive.

As long as we're on the topic, the preferred way to register event handlers is

standards compliant browsers

previous.addEventListener('click', prevImage, false);

IE

previous.attachEvent('onclick', prevImage);