Here’s the situation. I’m building a site which uses lots of scripts looking somewhat like this:
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);
}
And this will, when called with <body onload="generateRandomBlah()">, insert one of the letters at random into <span id="blah"></span>.
So there’s about 15 of these scripts, each with their own functions named slightly differently for different uses – generateRandomBlah2, etc, with a corresponding different place in the HTML for each script to do its work.
Because I’m not a very good coder, the way the whole thing works is that in the ‘body onload’ tag, there’s about 15 different ‘generateRandomBlah()’ functions just within this one tag. The nature of the site means that on any one page, I will only need 2 or 3 of these scripts at once, but I require the ability to call any of them on any page. As you can see, my current tactic is to just call them all at once, and if the corresponding doesn’t exist for a script, it’ll just ignore that fact and move onto the next one.
Except that it doesn’t ignore the fact that there’s no corresponding <span>.
As soon as one isn’t present, the rest of the scripts break and don’t actually do what they’re supposed to do. Looking at the code in Chrome’s ‘inspect code’ shows an error at the first script which happens to break: “Uncaught TypeError: Cannot set property ‘innerHTML’ of null”. I see a couple of potential solutions, but I might be completely off:
1) Add some code into each script which tells it that, if there’s no <span id> on the page to insert its code, it ends gracefully and moves onto the next one – gradually (obviously in less than a second speed-wise) going through the scripts and only running them if actually exists. (As you can see, the problem is that a script will get ‘snagged’ on the fact that there’s no place to insert its code and doesn’t just end gracefully if that happens.
2) Get rid of the ‘onload’ stuff and just make each script self-containing, calling its own function. I don’t know if this would fix the problem, though.
Anyway, some help would be much appreciated, as I’m stumped.
As you said in your first solution, testing for
nullbefore trying to “do” anything is probably your best bet short of completely recoding.That said, a much better approach than your current solution of making a bunch of very similar functions and running them all is to create a single function that can take parameters indicating what it should be doing. If they really are quite similar, it shouldn’t be difficult and will result in a lot fewer lines of code. It would also be nice if you can find a way for your page to not call all of the functions every time, though with fixing the
nullpointers that’s a much smaller issue.