0

这是情况。我正在构建一个使用大量脚本的网站，看起来有点像这样：

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 的“检查代码”中的代码会发现第一个脚本出现错误，该脚本恰好中断：“Uncaught TypeError: Cannot set property 'innerHTML' of null”。我看到了几个潜在的解决方案，但我可能完全不知道：

1）在每个脚本中添加一些代码，告诉它，如果<span id>页面上没有插入代码，它会优雅地结束并移动到下一个 - 逐渐（显然在不到一秒的速度）通过脚本并且只有在实际存在时才运行它们。（如您所见，问题在于脚本会因为没有地方插入其代码而被“卡住”，而且如果发生这种情况，也不会优雅地结束。

2）摆脱'onload'的东西，让每个脚本自包含，调用它自己的函数。不过，我不知道这是否能解决问题。

无论如何，一些帮助将不胜感激，因为我很难过。

4

2 回答 2

0

不确定我是否在这里遗漏了一些东西，但是由于即使错误消息也抱怨该值为 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>' );
于 2012-07-24T09:30:41.410 回答
0

正如您在第一个解决方案中所说，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指针是一个小得多的问题。

于 2012-07-24T09:31:05.117 回答