的JavaScript錯誤通話功能

Question

所以，球員，我必須JS文件，並在腦子裏，我有這樣的：

<script type="text/javascript" src="./scripts/changeImage.js"></script> 
<script type="text/javascript" src="./scripts/changeImageBot.js"></script> 

，並在身體我有這樣的：

<img id="myimage" onclick="changeImage()"src="./images/avatars/1.png"/> 
<img id="botimage" onclick="changeImageBot()"src="./images/computer/1.png"/> 

所以我的JS文件都OK，如果我有機器人changeimage和changeimagebot，只有其中一個會工作...但如果我讓頁面上只有一個他們的工作完美..

問題是，如果我嘗試使用它們當頁面加載..其中之一是窩而另一個則無效：|如果我按在changeImage()功能是將圖像從changeImageBot()改變......看看功能：

var cb=0; 
function changeImageBot(){ 
if(cb==-1){ 
    cb=0; 
    document.getElementById('botimage').src="./images/computer/1.png"; 
    } else if (cb==0){ 
    cb=1; 
    document.getElementById('botimage').src="./images/computer/2.png"; 
    } else if (cb==1){ 
    cb=2; 
    document.getElementById('botimage').src="./images/computer/3.png"; 
    } blabla on.. 
} 

var cc=0; 
function changeImage(){ 
if(cc==-1){ 
    cc=0; 
    document.getElementById('myimage').src="./images/avatars/1.png"; 
    } else if (cc==0){ 
    cc=1; 
    document.getElementById('myimage').src="./images/avatars/2.png"; 
    } else if (cc==1){ 
    cc=2; 
    document.getElementById('myimage').src="./images/avatars/3.png"; 
    } else if (cc==2){ 
    cc=3; 
    document.getElementById('myimage').src="./images/avatars/4.png"; 
    } blalba so on 
} 

的功能都在2 diferent文件..

Answer 1

你只需要等待到DOM完全加載。因爲你似乎沒有使用jQuery，所以你需要使用經典的JavaScript方法。 Here is the documentation to get you started。

作爲一個方面說明：如果您使用jQuery，這變得非常容易。請問是否需要幫助，瞭解如何使用jQuery完成此操作。

進展：jQueryWay

1. 首先包括在網頁上jQuery。
2. 從您的html中刪除onClick事件。
3. 到這兩個js文件添加以下代碼，改變函數名稱：

$(function() { 
    $("#myimage").click(function() { 
     changeImage(); 
    }); 
}); 

這樣做對雙方尤爾JavaScript文件，並相應改變圖像標識和函數調用。

'#myimage'是您的圖像的id，您將點擊回調綁定到。這和你完全一樣，除了javascript代碼完全一樣。它也等待dom被首先加載。這是通過將代碼包裝在$();函數中完成的。

你還提到你有140張圖片。不知道你的意思是什麼，但如果你想申請回來功能說100個圖像，你可以通過添加class = 'someclass'對他們。然後你的jQuery代碼將看起來像$('.somclass').click(..) 所以你不必依賴於ID。