如何允许document.getElementById找不到ID？

Question

I have an external JavaScript designed to replace certain words on my website. To keep it efficient the same external script is loaded to every page so I can simply edit a single file if I need to make any changes. This is a sample of the code I'm using:

document.getElementById("ey").innerHTML = 'AY'
document.getElementById("ny").innerHTML = 'BY'
document.getElementById("gy").innerHTML = 'CY'

However, I've discovered that if one page contains one element (say, "gy") but not another ("ny"), then the script fails to correctly execute. I have a long list of these changes (50ish), so I'd love to get it working.

Any idea how I can make the code provide allowances for not finding a particular id?

Answer 1

well, you can write something like

var el = document.getElementById("MY-ID")
if (el)
  el.innerHTML = 'MY VALUE'

A nice solution is to wrap this in a method, like this:

function setValue(id, value){
  var el = document.getElementById(id)
  if (el)
    el.innerHTML = value
}

And then call it like:

setValue('ey', 'AY')
setValue('ny', 'BY')

and so on

Answer 2

setInnerHTML('ey', 'AY');
setInnerHTML('ny', 'BY');

...etc etc

function setInnerHTML(elementId, innerHTML) {
    var el = document.getElementById(elementId);

    if (el) {
        el.innerHTML = innerHTML;
    }
}

Answer 3

You could always make a small structure for this.

(function(){
    var defaultChanges = {
        'ey' : 'AY',
        'ny': 'BY',
        'gy' : 'CY'
    };
    for(var id in defaultChanges){
        var el = document.querySelector("#"+id);
        if(el) el.innerHTML = defaultChanges[id];
    }
})()

This way going forward all you need to do is change your object, and the entire set will be changed in the page.

Answer 4

If not found, use a dummy object:

(document.getElementById("ey") || {innerHTML:''}).innerHTML = 'AY' 
(document.getElementById("ny") || {innerHTML:''}).innerHTML = 'BY'
(document.getElementById("gy") || {innerHTML:''}).innerHTML = 'CY'