Javascript 如何将document.getElementById（…）的null设置为true

我的代码中有更多的document.getElementById，但当我运行代码时，只有两个document.getElementById（ctx1，ctx2）得到其他值。我如何才能使其他的（在我的例子中是ctx3）返回true，而我没有得到错误消息。这是我的演示代码：

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

演示

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

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

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

在本例中，ctx1和ctx2获取值，但ctx3未获取值，这就是我获取文档的原因。getElementById（…）是控制台中的空错误消息。我有一些尝试，但都失败了

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

尝试

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

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

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

1

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

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

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

2

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

---

如果具有该ID的元素可能不存在，则需要分解语句。你不能这样做：

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

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

…因为

document.getElementById（“data3”）

可能返回

null

，然后尝试将其用于

.getContext（“2d”）

时会出错。因此：

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

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

现在，如果文档中没有

id=“data3”

元素，

elm3

和

ctx3

都将

null

。如果有，

elm3

将引用元素，

ctx3

将引用2D上下文

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

如果您要多次执行此操作，您可以为自己提供一个函数：

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

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

然后：

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

---

---

旁注：任何时候发现你自己写“代码> VAR1，<代码> VAR2，…，考虑使用一个数组代替。< /P> < P>如果<代码>文档。GETelEnMyBID（“DATA1”）<代码> <代码>未定义，<代码>（文档.GETelEnMyBID（“DATA1”）＝null）将给出<代码> false 。在这种情况下，如果

未定义，您可以轻松跳过
getContext（“2d”）
。希望这有帮助

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

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; 

如上所述，发生错误的原因是
.getElementById（…）
方法在没有具有此类ID的元素时返回null。并且您不能调用
null
上的方法，因为它没有相应的内置类（例如，数字有
Number
内置类，这就是为什么可以调用
3.0.toFixed（）
之类的方法）。
考虑到关于使用数组的建议，下面是我的代码：

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

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

这将返回一个上下文数组（如果元素不存在，在数组中其上下文所在的位置上，
true
将存在）
请发布HTML。使用
typeof document.getElementById（“yourid”）！=“undefined”
@bRIMOs:
typeof null
是
对象
，而不是
未定义”
，而且根本不需要在此处进行
类型的检查。代码转储不是有用的答案。请说明您做了什么，以及原因。
if(document.getElementById("data3")..getContext("2d").value == null){
    return true;
  }