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

Question

我的代码中包含更多document.getElementById，但是当我运行代码时，只有两个document.getElementById（ctx1，ctx2）获取其他值。 我如何才能使其他（在我的情况下为ctx3）返回true，而我却没有得到错误提示。 这是我的演示代码：

DEMO

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

在这种情况下ctx1和ctx2获得值，但ctx3没有，这就是为什么我得到document.getElementById（...）在控制台中为空错误消息的原因。 我做了一些尝试，但是都失败了。

尝试

1

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

2

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

Answer 1

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

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

...因为document.getElementById("data3")可能返回null ，然后在尝试将其用于.getContext("2d")遇到错误。 所以与其：

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

现在，如果您的文档中没有id="data3"元素，则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

如果undefined document.getElementById("data1") ， ( 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()类的方法）。 考虑到TJ Crowder关于使用数组的绝妙建议，这是我的代码：

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

这将返回一个上下文数组（如果不存在元素，则在数组中其上下文的位置出现true ）