如何将 document.getElementById(...) is null massage 设置为 true

Question

我的代码中有更多 document.getElementById，但是当我运行我的代码时，只有两个 document.getElementById (ctx1, ctx2) 获得值，其他的没有。我怎样才能达到其他人（在我的例子中是 ctx3）return true 并且我没有得到错误消息。这是我的演示代码：

演示

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(...) is null 错误消息.我有一些尝试，但都失败了。

尝试

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") 可能 return 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

如果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(...) 方法 return 为 null。而且你不能在 null 上调用方法，因为它没有相应的内置 class （例如，数字有 Number 内置 class 这就是为什么你可以调用 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;
});

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

如何将 document.getElementById(...) is null massage 设置为 true

How can I set document.getElementById(...) is null massage to true

javascript

getelementbyid

isnull