Question

我收到错误：

未捕获的TypeError：无法读取未定义的属性“长度”

使用以下JavaScript代码：

var varId = $("#someInputId");
if (typeof varId !== "undefined" && varId.val().length == 0)

其中varId是输入元素的ID，可能是也可能不在HTML页面中。

我认为如果元素未定义，则不计算第二个子句。

为什么我会收到这样的错误？

Answer 1

这是因为jQuery对象可能是空的。

让我们一步一步地完成您的代码：

var varId = $("#someInputId");

所以在这之后，你有一个由varId引用的jQuery对象。请记住，这是一个jQuery 对象，无论返回的元素数量是多少。现在你这样做：

if (typeof varId !== "undefined" && varId.val().length == 0)

~~这里的第一件事，并不确定这是否只是问题中的错误，！==应该是！=。~~

无论如何，请考虑条件的typeof varId != "undefined"部分。这将返回true，因为varId是一个对象，并且未定义。由于这是真的，条件评估转到下一部分。因此，在评估varId.val().length == 0时，您会收到错误Uncaught TypeError: Cannot read property 'length' of undefined。为了使某些东西具有length属性，它必须是字符串或数组，并且jQuery中的val()返回一个字符串，或者在多选输入的情况下返回一个数组。但是，如果jQuery对象为空，则val（）将返回undefined，它没有length属性。

基本上，你可以按如下方式重写表达式：

if ( varId.length && varId.val().length === 0 ) {
  // Do something
}

Answer 2

您正在尝试使用undefined（即undefined.length）的长度，这就是抛出'Uncaught TypeError'错误。

显然，$("#someInputId")未定义或未返回任何结果。最有可能的是，$("#someInputId")没有返回任何结果，并且空集的值未定义。

您的条件检查到达第二个子句，因为$()将始终实例化jQuery对象。但是如果jQuery对象为空，则其值将是未定义的。

要避免此错误，您需要检查查询是否返回结果：

var varId = $("#someInputId");
if (varId.length > 0 && varId.val().length === 0) {

如果#someInputId存在并且值为0，那么条件将成立。

Answer 3

其中varId是ntml页面中可能存在或不存在的输入元素的id。

如果元素不存在，则必须检查jQuery对象是否包含任何元素：

if (varId.length && ...) {

$将总是返回一个jQuery对象，即使它没有选择任何元素（因此永远不会是undefined）。但是，对空选择调用.val将返回undefined。

还要确保在DOM准备好后执行代码。请阅读jQuery tutorial "How jQuery Works"以了解如何执行此操作。

Answer 4

试试这个

   if ($("#someInputId").val()!= undefined &&
           $("#someInputId").val().length == 0)

Answer 5

jQuery中有一个val()函数。

<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<input id="varId" value="varIdValue" />
<p id="output"></p>
<script type="text/javascript">
  var varId = $("#varId");
  var output = $("#output");
  output.html((typeof varId == "undefined") + ' ' + varId.val() + ' ' + varId.val().length);
</script>

输出将是：false varIdValue 10

如果你不使用jQuery，那么你必须使用value这样的属性：

var varId = document.getElementById('varId');
var output = document.getElementById('output');
output.innerHTML = (typeof varId == "undefined") + ' ' + varId.value + ' ' + varId.value.length;

输出结果相同：false varIdValue 10

编辑

var varId = document.getElementById('doesntExist');
var varIdIsObject = (typeof varId == "object");

varId将为null，varIdIsObject将为真

但是在jQuery中：

var varId = $('#doesntExist');

varId将是包含2个字段的jQuery Object：context（HTMLDocument）和selector（在我们的变体中是'#doesntExist'）。

未捕获的TypeError在javascript中未定义

5 个答案: