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 个答案: