如何设置document.getElementById（…）为null按摩为true

Question

I have more document.getElementById in my code, but when I run my code, just two document.getElementById (ctx1, ctx2) get values the others not. How can I reach that the others (in my case ctx3) return true and I do not get error massage. Here is my demo code:

DEMO

var ctx1=document.getElementById("data1").getContext("2d");     
var ctx2 =document.getElementById("data2").getContext("2d");
var ctx3 =document.getElementById("data3").getContext("2d");

In this case ctx1 and ctx2 get value but the ctx3 not, that's why I got the document.getElementById(...) is null error message in the console. I have some attempt but these are failed.

ATTEMPT

1

if(ctx3 === null || 
   ctx3 === undefined) {
    return true;
}   

2

if(document.getElementById("data3")..getContext("2d").value == null){
    return true;
  }

Answer 1

If an element with that ID may not exist, you need to break up your statement. You can't do this:

// Not this
var ctx3 =document.getElementById("data3").getContext("2d");

...because document.getElementById("data3") may return null , and then you get an error trying to use that for .getContext("2d") . So instead:

var elm3 = document.getElementById("data3");
var ctx3 = elm3 && elm3.getContext("2d");

Now, if there is no id="data3" element in your document, elm3 and ctx3 will both be null . If there is, elm3 will refer to the element and ctx3 to the 2D context.

If you're going to do this more than once, you could give yourself a function for it:

function getOptionalContext(id) {
    var elm = document.getElementById(id);
    return elm && elm.getContext("2d");
}

Then:

var ctx1 = getOptionalContext("data1");
var ctx2 = getOptionalContext("data2");
var ctx3 = getOptionalContext("data3");

---

Side note: Any time you find yourself writing var1 , var2 , var3 , ..., consider using an array instead.

Answer 2

If document.getElementById("data1") is undefined , ( document.getElementById("data1") != null ) will give false . In this case, you can easily skip the getContext("2d") if they are undefined . Hope this helps.

var ctx1 = ( document.getElementById("data1") != null ) ? ( document.getElementById("data1") != null ).getContext("2d") : null;
var ctx2 = ( document.getElementById("data2") != null ) ? ( document.getElementById("data2") != null ).getContext("2d") : null; 
var ctx3 = ( document.getElementById("data3") != null ) ? ( document.getElementById("data3") != null ).getContext("2d") : null; 

Answer 3

As mentioned above by others, the error occurs because .getElementById(...) method returns null if there is no element with such an ID. And you can't call methods on null , because it has no corresponding built-in class (for example, numbers have Number built-in class and that's why you can call methods like 3.0.toFixed() ). Taking into account great suggestion of TJ Crowder about using an array, here is my code:

var selectors = ["data1", "data2", "data3"];
var contexts = selectors.map(function(selector) {
    var elem = document.getElementById(selector);
    return elem ? elem.getContext("2d") : true;
});

This will return an array of contexts (if element is not present, on the place of its context in the array, true will be present)