Question

未捕获类型错误：无法读取 document.getElementByID().value 的属性“null”值；

2017-08-20

1618

javascript

我试图获取输入字段的值，但控制台显示无法读取属性空值。我使用了 document.getElementByID().value 函数。当我查看源代码时，代码可以很好地显示值，但 javascript 变量没有获取值。以下是我的代码：

<script type="text/javascript">

 function addCart(id,name,price)
    {

    var quantity=document.getElementById("quantity_"+id).value;//this line gets error
      
    $.ajax({
        type:'post',
        url:'addCart.php',
        data:{
          item_id:id,
          item_name:name,
          item_quantity:quantity,
          item_price:price
        },
        success:function(response) {
          document.getElementById("cart").innerHTML=response;
        }
      });
 
    }
 </script>

我也尝试使用 jquery get val() 函数，如下所示...

<script type="text/javascript">

 function addCart(id,name,price)
    {
    var quantity = $('#quantity_'+id).val(); //this line 

    $.ajax({
        type:'post',
        url:'addCart.php',
        data:{
          item_id:id,
          item_name:name,
          item_quantity:quantity,
          item_price:price
        },
        success:function(response) {
          document.getElementById("cart").innerHTML=response;
        }
      });
 
    }
 </script>

查看我的 html 代码：

<?php while($row = mysqli_fetch_array( $fetch_customer_menu_result))
      {
        $item_ID=$row['item_id'];
        $item_NAME=$row['item_name'];
        $item_PRICE=$row['item_price'];
       
        echo '          
            <div class="w3-col l8 w3-col s8">
          <input class="form-control w3-left" type="number" placeholder="count" id="quantity_'.$row['item_id'].'" value="1">

              <span class="w3-right"><u>Rate (each):</u></span><br>       
              <span class="w3-right w3-large"><b>Rs. '.$row['item_price'].'</b></span>
                                     
            </div>  
          </div>   
          <div class="w3-col l12 w3-center" style="margin-top: 5px">
            <button type="button" class="w3-red btn form-control" onclick="addCart(\' '.$item_ID.' \',\' '.$item_NAME.' \',\' '.$item_PRICE.' \')" >Add To Cart</button>
          </div>
        </div>
      </div>';
      }
      ?>

Answer 1

Uncaught type error: cannot read property ' null ' value for document.getElementById().value;

此错误意味着 document.getElementById() 返回一个 null 指针（即，它找不到它要查找的元素，因此它返回 null ），然后您尝试查找不存在的字段的值（ document.getElementById("quantity_"+id).value 变为 null.value ，而 null 没有名为 value 的字段）。

为什么？

最可能的原因（在这种情况下）是您在 addCart 函数中作为 id 传入的值不正确。但是，可能有几个原因。请遵循以下调试步骤：

确保参数的顺序与函数中定义的顺序以及调用它的位置相同（即，您没有传递 name ，而应该传递 id ）
在出现错误的行上方添加此行： console.log("quantity_"+id) ，然后使用浏览器控制台检查文本框是否具有确切该 ID - 如果没有，那么这就是您的问题。
确保仅当文本字段在屏幕上时才调用 addCart - 确保您不会删除文本字段然后调用 addCart ，并且不会在创建元素之前调用 addCart 。
确保没有两个名为 addCart 的函数。