爲什麼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> 

它有人可以幫我請，我不知道如何使工作當你設置由JavaScript onclick在我的應用程序的按鈕

感謝

Answer 1

，它是函數引用而不是字符串。

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

應該

previous.onclick = prevImage; 

解決您的其他任務遵循這種模式。另外onclick都是小寫字母，並區分大小寫。

只要我們的話題，註冊事件處理程序的首選方法是

符合標準的瀏覽器

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

IE

previous.attachEvent('onclick', prevImage);