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

Question

我已經在其中創建了表格，按鈕等的地方編寫了一個.js文件。我的應用是相冊，並且所有內容都在此文件上創建，html正確地包含所有按鈕，但是當我單擊按鈕時，按鈕不會更改圖像。

.jp文件的代碼為：

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();


}

和html代碼是：

<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>

有人可以幫我，我不知道如何使應用程序的按鈕工作

謝謝

Answer 1

當您通過javascript設置onclick ，它是函數引用而不是字符串。

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

應該

previous.onclick = prevImage;

修正其他作業以遵循此模式。 同樣， onclick都是小寫，並且區分大小寫。

只要我們處於主題中，注冊事件處理程序的首選方法是

符合標准的瀏覽器

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

IE瀏覽器

previous.attachEvent('onclick', prevImage);