CODEWITHSUNDEEP
javascripthtml
user3204755
user3204755

Reputation: 3

javascript: not having to use all the IDs in a html file?

I want to use the same .js for a bunch of html pages, but not necessarily all the ID's from this .js in every single page. Right now, if I don't use one ID; no ID's are showing at all.

var yes = 'Yes';
var no = 'No';
var available = 'Available: ';

document.getElementById("001").innerHTML=available+yes;
document.getElementById("002").innerHTML=available+no;
document.getElementById("003").innerHTML=available+yes;

A html with this works fine:

 <div id="001"></div>
 <div id="002"></div>
 <div id="003"></div>

A html with this, not so fine:

 <div id="002"></div>
 <div id="003"></div>

What to do to make it run even though some ID's arn't being used?

Complete noob to this, there's probably a super simple solution to it(?) - but I can't find it. Hopefully, someone here can help me - without totally bashing me, or telling me how much of a bad praxis this is and that I should rewrite it in some mega haxxor language that I havn't even heard of :D

Thanks in advance!

Upvotes: 0

Views: 60

Answers (4)

cookie monster
cookie monster

Reputation: 10972

While I'd question why you'd need incrementing numeric IDs like that, one solution would simply be to keep an map of IDs to values, then iterate the map checking for null.

var m = {
    "001":yes,
    "002":no,
    "003":yes
};

for (var p in m) {
    var el = document.getElementById(p);
    if (el)  // or if (el !== null)
        el.innerHTML = available + m[p];
}

Upvotes: 1

markasoftware
markasoftware

Reputation: 12662

Just wrap the whole thing in a try statement to avoid any issues and put code afterwards into a finally statement::

try{
document.getElementById("001").innerHTML=available+yes;
document.getElementById("002").innerHTML=available+no;
document.getElementById("003").innerHTML=available+yes;
//etc
}
finally{
    //any other code that there is after the id stuff
}

that'll prevent errors, so if something fails, it will still continue

Upvotes: 0

Meow
Meow

Reputation: 138

wrap it with if(document.getElementById("id")!==null) ?

Upvotes: 0

nnnnnn
nnnnnn

Reputation: 150030

The document.getElementById() function returns null if no matching element is found. null.innerHTML is an error that stops the current script executing. So you just have to test for null:

var el = document.getElementById("001");
if (el != null) el.innerHTML = available + yes;

The null test can be simplified to:

if (el) el.innerHTML = available + yes;

If element "001" is always going to be "yes", "002" is always going to be "no" and so forth then you can do this:

var results = {"001" : yes, "002" : no, "003" : yes};
var el, k;
for (k in results) {
    el = document.getElementById(k);
    if (el) el.innerHTML = available + results[k];
}

Upvotes: 0

Related Questions