JavaScript的兩個onload函數

我對JavaScript編程頗爲陌生，我試圖創建一些腳本來節省我的時間來維護我的一個網站。JavaScript的兩個onload函數

現在我有兩個函數在同一個腳本中，我從我的文檔的頭部調用，我試圖讓他們同時加載onload事件處理程序。我在我的腳本中使用window.onload命令來做到這一點（我想讓我的腳本儘可能不顯眼，所以我只是在標題中調用腳本）。問題是隻加載第一個函數，而第二個函數加載不了。既可以用函數被調用：

window.onload=function(){ 
function1(); 
function2(); 
}

還是有不同的代碼，我需要用它來做到這一點？

我真的很感激它，如果你可以讓你的解釋儘可能簡單，因爲我對JavaScript和編程一般都很陌生。

P.S.如果不止一個函數不能用onload加載，你能否向我解釋爲什麼會出現這種情況，所以我知道將來會如此。

好吧，我從答案中看到，我的問題可能留下了太多的假設，所以這裏是我試圖調用的函數的全部代碼（這是我在我的html文檔頭部調用的腳本）：

我試圖避免把代碼放在這裏，因爲我的變量是用塞爾維亞語寫的（因爲我來自塞爾維亞），但我希望你仍然能夠通過它看，而不會有太多困惑。在下面的代碼中，我在腳本的底部調用了兩個函數（lista（）和ostale（）），moveover（）函數只是lista（）函數調用的幫助函數。從本質上講，第一個列表（lista（））通過div「boje」的所有元素（英文翻譯成「顏色」）列出，並且根據用戶將鼠標懸停在其上的顏色，背景圖像會發生變化。它還爲用戶應該懸停的圖像元素添加了一些屬性。第二個（ostale（）（譯爲英文「others」）應該只添加其他顏色圖像的屬性，如果用戶將鼠標懸停在其上不應該做任何事情但是當我打開頁面在本地主機不會在任何屬性已被添加到div「ostale」內的圖像Firefox的檢查元素顯示

function lista() 
{ 
var boje = document.getElementById('boje'); 
var broj = boje.childNodes.length; 
for(i=1; i<broj; i++) 
{ 
    var stavka = boje.childNodes.item(i); 
    stavka.setAttribute("id", i); 
    stavka.setAttribute("onmouseover", "moveover(src)"); 
    stavka.setAttribute("alt", "Boja"); 
    stavka.setAttribute("class", "boja"); 
    stavka.hspace="2"; 
    stavka.height="23"; 
} 
} 

function moveover(adresaBoje) 
{ 
var izvor = adresaBoje; 
var slika = izvor.slice(0, izvor.length-4); 
var pocetak = "url("; 
var ekstenzija = ".jpg)"; 
var novaSlika = pocetak.concat(slika, ekstenzija); 
document.getElementById('slika').style.backgroundImage=novaSlika; 
} 

function ostalo(){ 
var ostaleboje = document.getElementById('ostale'); 
var ostalebroj = ostaleboje.childNodes.length; 
for(n=1; n<ostalebroj; n++) 
{ 
    var ostalestavka = ostaleboje.childNodes.item(n); 
    ostalestavka.setAttribute("alt", "Boja"); 
    ostalestavka.hspace="2"; 
    ostalestavka.height="23"; 
} 
} 

window.onload=function(){ 
try 
{ 
lista(); 
ostalo(); 
} 
catch(err) 
{ 
alert(err); 
} 
}

後，我嘗試加載它提醒我有錯誤的頁面：「類型錯誤：stavka.setAttribute是不是一個函數」

這是我試圖操縱html文件：

<div id="slika" style="background-image: url(images/nova_brilliant/1.jpg)"> 
</div> 

<div id="tekst"> 

<h1>Nova Brilliant</h1> 

<div id="sadrzaj"> 
<p>Pre&#273;ite mi&#353;em preko &#382;eljene boje da biste videli kako izgleda ova kuhinja u toj boji:</p> 
<div id="boje"> 
<img src="images/nova_brilliant/1.gif"><img src="images/nova_brilliant/2.gif"><img src="images/nova_brilliant/3.gif"> 
</div> 
<p>Ostale dostupne boje:</p> 
<div id="ostale"> 
<img src="images/nova_brilliant/4.gif"><img src="images/nova_brilliant/5.gif"><img src="images/nova_brilliant/6.gif"> 
</div> 
</div> 

</div>

來源

2013-03-28 SineLaboreNihil

這應該只是罰款...問題位於其他地方 – loxxy

從onload處理函數調用這兩個函數應該可以正常工作。工作中最有可能存在另一個問題。嘗試做一個jsfiddle或包含更多的代碼。 – kinakuta

你是什麼意思「第二個不（負載）」？你有錯誤嗎？ –

是的，你可以。但是，如果第一次出錯，第二次不會開火。

使用此捕獲錯誤：

try { //try executing the functions 
    function1(); 
    function2(); 
} 
catch(error) { // If there's an error 
    alert(error); // alert the error. 
}

它是把try和catch用JavaScript實驗時一個很好的做法。

編輯：對不起，我把childNodes []與childNodes.item（）混淆了。

順便說一句，我想是這樣的，它工作得很好：

<head> 
<script> 

window.onload = function() { 
div = document.getElementById("someDiv"); 
length = div.childNodes.length; 
    first(); 
    second(); 
} 
function first() { 
    for(var i=0;i<length;i++) { 
     var set = div.childNodes.item(i); 
     set.setAttribute("name", "span " + (i+1)); 
    }  
} 
function second() { 
    for(var i=0;i<length;i++) { 
     name = div.childNodes[i].getAttribute("name"); 
     console.log(name); 
    } 
} 
</script> 
</head> 
<body> 
<div id='someDiv'><span id='span1'></span><span id='span2'></span></div> 
</body>

更新：我發現了錯誤： 其實沒有什麼你的代碼錯誤。它工作得很好，但是，boje的最後一項是空白，也就是文本節點。這就是爲什麼錯誤不斷出現。更改for(i=1; i<broj; i++)與for(i=1; i<broj-1; i++)和一切都應該是好的。

來源

2013-03-28 14:52:35 aIKid

謝謝你的回答，但是當我把項目[我]第一個功能根本不執行。順便說一句，我也嘗試了try/catch內的window.onload = function（）{}並顯示錯誤：TypeError：stavka未定義。爲什麼會在for循環中定義「stavka」變量時顯示此錯誤？ – SineLaboreNihil

我已經改變了我的櫃檯，並宣佈其中的i變量，但也沒有工作。它不斷給我同樣的錯誤：TypeError：stavka未定義。 – SineLaboreNihil

另外，我從1開始計數，因爲我通過一個div來計數div標記和第一個圖像標記之間的空白空間作爲節點。如果我從0開始，它將無法正常工作。 – SineLaboreNihil

Can both functions be called with

是的。如果通過分配給DOM屬性來添加事件處理程序，則只能爲每個函數分配一個函數，但該函數可以調用其他函數。

但是，如果你這樣做，第一個函數會拋出一個錯誤，那麼第二個函數根本就不會觸發。它也會丟棄上下文和參數，因爲它們不會被傳遞給被調用的函數。

你可以解決這些問題，像這樣：

window.onload=function(){ 
    try { 
    function1.apply(this, arguments); 
    } catch (e) { } 
    try { 
    function2.apply(this, arguments); 
    } catch (e) { } 
}

or is there a different code I need to use to accomplish this?

您應該使用addEventListener代替。這樣可以避免使用應用程序，並保護您免受錯誤拋出。有關更多詳細信息，請參見MDN events documentation。

window.addEventListener('load', function1); 
window.addEventListener('load', function2);

來源

2013-03-28 14:18:26 Quentin

我嘗試使用addEventListener，但我無法讓它工作。 – SineLaboreNihil

我遇到了同樣的問題。我碰到一對夫婦的幫助，但這個很容易理解，它的工作對我來說：

window.addEventListener("load", func1); window.addEventListener("load", func2);

就像@Quentin你可以閱讀更多關於它here

來源

2015-02-02 15:10:11 Kunle

JavaScript的兩個onload函數

回答

相關問題