如何将 document.getElementById(...) is null massage 设置为 true
How can I set document.getElementById(...) is null massage to true
我的代码中有更多 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;
}
如果具有该 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
、...,请考虑改用数组。
如果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;
正如其他人在上面提到的那样,如果没有具有此类 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,但是当我 运行 我的代码时,只有两个 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;
}
如果具有该 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
、...,请考虑改用数组。
如果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;
正如其他人在上面提到的那样,如果没有具有此类 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
将存在)