僅當某些HTML元素存在時才運行多個Javascript腳本？

這是情況。我建立它使用大量有點期待這樣的腳本的網站：僅當某些HTML元素存在時才運行多個Javascript腳本？

function getRandomArrayIndex(source_array) { 

return Math.floor(Math.random() * source_array.length); 

} 

function getRandomArrayEntry(source_array) { 

var random_index = getRandomArrayIndex(source_array); 

return source_array[random_index]; 

} 

function getRandomBlah() { 

var blahs = [ 
["A"], 
["B"], 
["C"], 
["D"], 
["E"], 
["F"], 
["G"], 
["H"], 
["I"], 
["L"], 
["M"], 
["N"], 
["O"], 
["P"], 
["R"], 
["S"], 
["T"], 
["V"], 
["W"], 
["Y"], 
]; var random_blah = getRandomArrayEntry(blahs); 

return random_blah; 

} 

function displayBlah(blah) { 

const TEXT_ROW = 0; 

const LINK_ROW = 1; 

var blah_text = blah[TEXT_ROW]; 

var blah_link = blah[LINK_ROW]; if (blah_link != null) { 

document.getElementById("blah").innerHTML = '<a href="' + blah_link + '">' + blah_text + '</a>'; 

} else { 

document.getElementById("blah").innerHTML = blah_text; 

} 

} 

function generateRandomBlah(){ 

var random_blah = getRandomBlah(); 

displayBlah(random_blah); 

}

，這將，與<body onload="generateRandomBlah()">叫，插入一個字母隨機進入<span id="blah"></span>。

所以這裏有大約15個這樣的腳本，每個腳本都有自己的函數，這些函數在不同的用途上略有不同 - generateRandomBlah2等，每個腳本都有相應的不同位置來完成它的工作。

因爲我不是一個很好的編碼器，整個工作的方式是在'body onload'標籤中，在這個標籤中有大約15個不同的'generateRandomBlah（）'函數。該網站的性質意味着任何一個頁面上，我將只需要2個或這些腳本一次的3，但我需要的能力叫其中任何上任何頁面。正如你所看到的，我目前的策略是隻叫他們一下子，如果相應的腳本不存在，它會忽略這一事實，並移動到下一個。

除了它不會忽略一個事實，即有沒有相應的<span>。

只要一個不存在，腳本的休息時間，不實際做他們應該做的事情。在Chrome的「檢查代碼」的代碼看顯示了這恰好打破的第一個腳本錯誤：「遺漏的類型錯誤：無法設置屬性空的‘的innerHTML’」。我看到一些潛在的解決方案，但我可能完全關閉：

1）在每個腳本中添加一些代碼，告訴它，如果頁面上沒有<span id>來插入代碼，它會優雅地結束並移動到下一個 - 逐漸地（明顯地以小於二秒的速度）通過腳本並且只在實際存在時才運行它們。（正如你所看到的，問題是腳本會因爲沒有地方插入它的代碼而不能正常結束的事實而受到阻礙

2）擺脫'加載「的東西，並使每個腳本自包含，調用它自己的函數。不過，我不知道這是否能解決問題。

無論如何，一些幫助，將不勝感激，因爲我很爲難。

來源

2012-07-24 ingredient_mosteroid

，正如你在第一個解決方案說，試圖「做」之前測試的null東西可能是完全重新編碼的你最好的選擇短。

function getRandomArrayIndex(source_array) { 
    if(source_array === null) return; // similar lines in each function should fix everything 
    return Math.floor(Math.random() * source_array.length); 
}

這就是說，比你現在做了一堆非常相似的功能，運行他們所有的解決方案多更好的方法是創建一個可以說明它應該做的參數的單一功能。如果它們真的非常相似，那就不會有困難，並且會導致很少的代碼行數。如果你能找到一種方法讓你的頁面不會每次都調用所有的函數，那麼修復指針也是一件很不容易的事情。

來源

2012-07-24 09:31:05 Dan

這些腳本除了它們經過的事物列表之外都是相同的（例如，A-Z可能在另一個腳本中是1-10）以及函數和元素的名稱。我會用一個腳本來完成，但我不知道從哪裏開始。我會嘗試一下，一旦我找出我要把這段代碼放在哪裏 - 我是否可以說我可以在腳本中的任何函數下插入'if'？ – 2012-07-24 09:44:11

如果應該在您嘗試使用您選擇的任何對象進行任何操作之前。在這一個，你正在訪問source_array的長度，所以if **需要**在此之前。如果你傳遞一個對象，測試是第一行（就像我的例子中的那樣），如果你傳遞一個對象的引用（id/class/etc），那麼你的第一行會嘗試檢索元素和第二個要確定你得到的東西與if。合理？ – Dan 2012-07-24 09:48:27

@ user1548172，如果我的解決方案適合您，請務必接受。謝謝！ :) – Dan 2012-07-24 09:53:00

不知道如果我在這裏失去了一些東西，但是因爲即使錯誤消息埋怨值爲空顯而易見的解決方案是檢查null：

var element = document.getElementById("blah"); 

if(element !== null) { 
    element.innerHTML = '<a href="' + blah_link + '">' + blah_text + '</a>'; 
}

如果你需要做的，往往你可以做一個功能它：

function updateIfExists(id, content) { 
    var element = document.getElementById(id); 

    if(element !== null) { 
     element.innerHTML = content; 
    } 
} 

updateIfExists('blah', '<a href="' + blah_link + '">' + blah_text + '</a>');

來源

2012-07-24 09:30:41 JJJ

我會在這之前，謝謝。 :) – 2012-07-24 09:58:41

好吧，我嘗試了這樣的代碼，如下所示：'function displayBlah（blah）{var_ext_getElementByID（「blah」）;如果（element！== null）{0} {0}}} const LINK_ROW = 1; var blah_text = blah [TEXT_ROW]; var blah_link = blah [LINK_ROW];如果（blah_link！= null）{ element.innerHTML ='' + blah_text + ''; } else { element.innerHTML = blah_text; } } }' – 2012-07-24 22:31:26

問題是，我使用Chrome的開發人員工具得到以下錯誤：「Uncaught TypeError：Object＃ has no method'getElementByID'」任何想法如何解決這個問題？謝謝！ – 2012-07-24 22:32:27

僅當某些HTML元素存在時才運行多個Javascript腳本？

回答

相關問題