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

Question

這是情況。 我正在建立一個使用大量腳本的站點，看起來像這樣：

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等，每個腳本在HTML中的對應位置也不同，以完成其工作。

因為我不是一個很好的編碼器，所以整個工作方式是在“ body onload”標簽中，在一個標簽中大約有15個不同的“ generateRandomBlah（）”函數。 該網站的性質意味着任何一個頁面上，我只需要這些腳本的2或3一次，但我需要打電話給任何人的任何頁面上的能力。 如您所見，我當前的策略是立即全部調用它們，如果腳本不存在相應的名稱，它將忽略該事實並轉到下一個。

除非它不忽略沒有相應的<span>的事實。

一旦一個腳本不存在，其余的腳本就會中斷，並且實際上不執行應執行的操作。 查看Chrome的“檢查代碼”中的代碼會發現第一個腳本出錯，該腳本恰好會中斷：“未捕獲的TypeError：無法將屬性'innerHTML'設置為null”。 我看到了一些潛在的解決方案，但我可能會完全不滿意：

1）在每個腳本中添加一些代碼，告訴它，如果頁面上沒有<span id>來插入其代碼，它將優雅地結束並逐步移至下一個-顯然（顯然，速度小於一秒）查看腳本並僅在實際存在的情況下運行它們。 （如您所見，問題在於，腳本無處可插入，並且如果發生這種情況，不僅會優雅地結束，而且腳本將被“鈎住”。

2）刪除“ onload”內容，僅使每個腳本都包含自身，調用其自己的函數。 我不知道這是否可以解決問題。

無論如何，有些幫助將不勝感激，因為我很沮喪。

Answer 1

不知道我是否在這里遺漏了一些東西，但是由於錯誤消息甚至抱怨值是null，所以顯而易見的解決方案是檢查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>' );

Answer 2

就像您在第一個解決方案中所說的那樣，在嘗試“做任何事情”之前測試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);
}

這就是說，比你現在做了一堆非常相似的功能，運行他們所有的解決方案更好的方法是創建一個可以說明它應該做的參數的單一功能。 如果它們確實非常相似，那就不難了，並且可以減少很多代碼行。 如果您能找到一種方法來使頁面每次都不調用所有函數，那也很好，盡管修復null指針的問題要小得多。

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

問題描述

2 個解決方案

解決方案1
0 2012-07-24 09:30:41

解決方案2
0 已采納 2012-07-24 09:31:05

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

問題描述

2 個解決方案

解決方案1 0 2012-07-24 09:30:41

解決方案2 0 已采納 2012-07-24 09:31:05

解決方案1
0 2012-07-24 09:30:41

解決方案2
0 已采納 2012-07-24 09:31:05