Comment puis-je définir document.getElementById (...) est null massage à vrai

Question

J'ai plus document.getElementById dans mon code, mais quand je cours mon code, seulement deux document.getElementById (ctx1, ctx2) obtiennent des valeurs le d'autres pas. Comment puis-je atteindre que les autres (dans mon cas ctx3) reviennent vrai et je ne reçois pas de massage d'erreur. Voici mon code de démonstration:

DEMO

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

Dans ce Ctx1 cas et CTX2 valeur get mais le CTX3 pas, voilà pourquoi je suis le document.getElementById (...) est nulle message d'erreur dans la console. J'ai quelques tentatives, mais celles-ci ont échoué.

TENTATIVE

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

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

Answer 1

Si un el Il se peut que vous ne soyez pas en possession de cette pièce d'identité, vous devez diviser votre déclaration. Vous ne pouvez pas faire ceci:

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

... parce que document.getElementById("data3") peut retourner null, et vous obtenez une erreur d'essayer de l'utiliser pour .getContext("2d"). Ainsi, au lieu:

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

Maintenant, s'il n'y a aucun élément id="data3" dans votre document, elm3 et ctx3 seront tous deux null. S'il y a, elm3 fera référence à l'élément et ctx3 au contexte 2D.

Si vous allez faire plus d'une fois, vous pouvez vous donner une fonction pour elle:

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

Puis:

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

---

Side note: Chaque fois que vous trouvez-vous en train d'écrire var1, var2, var3, ..., pensez à utiliser un tableau à la place.

Answer 2

Si document.getElementById("data1") est undefined, (document.getElementById("data1") != null) donnera false. Dans ce cas, vous pouvez facilement passer le getContext("2d") s'ils sont undefined. J'espère que cela t'aides.

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

Comme mentionné ci-dessus par d'autres, l'erreur se produit parce que .getElementById(...) méthode retourne null s'il n'y a aucun élément à une telle identification. Et vous ne pouvez pas appeler des méthodes sur null, car il n'a aucune classe intégrée correspondante (par exemple, les nombres ont Number intégré et c'est pourquoi vous pouvez appeler des méthodes comme 3.0.toFixed()). Compte tenu de grande suggestion de T.J. Crowder sur l'utilisation d'un tableau, voici mon code:

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

Ceci renvoie un tableau de contextes (si l'élément est pas présent, sur la place de son contexte dans le tableau, true sera présent)