document.getElementById（...）がnullのマッサージをtrueに設定するには

Question

私のコードにもっとdocument.getElementByIdがありますが、コードを実行すると2つのdocument.getElementById（ctx1、ctx2）が値を取得します。他にはない。どうすれば他の人たち（私の場合はctx3）が真実を返し、私はエラーマッサージを受けることができません。ここに私のデモコードです：私はのdocument.getElementById（...）を得た理由、それはだ

この場合のCTX1とにctx2 GET値でDEMO

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

しかしctx3ないヌルされコンソールにエラーメッセージが表示されます。私はいくつかの試みをしているが、これらは失敗している。

ATTEMPT

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

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

Answer 1

EL場合そのIDを持つ人が存在しない可能性がある場合は、そのステートメントを分割する必要があります。 nullを返すことが

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

... document.getElementById("data3")ので、その後、あなたは.getContext("2d")のためにそれを使用しようとするとエラーが表示されます。あなたはこれを行うことはできません。だからではなく：あなたの文書にはid="data3"要素が存在しない場合

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

は今、elm3とctx3は両方nullになります。存在する場合、elm3は要素を参照し、ctx3は2Dコンテキストを参照します。何度もこの多くをやろうとしている場合、あなたはそれを自分自身に機能を与えることができる

：

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

その後：

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

---

サイドノート：任意の時点ますvar1、var2、var3、...と書いてください。代わりに配列の使用を検討してください。

Answer 2

document.getElementById("data1")がundefinedの場合、(document.getElementById("data1") != null)はfalseとなります。この場合、undefinedの場合はgetContext("2d")を簡単にスキップできます。お役に立てれば。

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

他の人が上記のようなIDとは要素が存在しない場合.getElementById(...)メソッドがnullを返すので、エラーが発生します。 nullのメソッドを呼び出すことはできません。これには対応する組み込みクラスがありません（たとえば、数値にはNumberの組み込みクラスがあり、それで3.0.toFixed()のようなメソッドを呼び出すことができます）。ここでは、アカウントに配列を使用する方法についてT.J. Crowderの偉大な提案を取る は私のコードです：

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

要素が存在しない場合、これは、配列内のそのコンテキストの代わりに、（trueをコンテキストの配列を返します。 will present）