Question

我试图获取输入字段的值但是控制台说不能读取属性null值。我使用了document.getElementByID（）。value函数。当我查看源代码时，代码显示的值很好，但javascript变量没有获得值。以下是我的代码：

＆＃13;

 <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>

＆＃13;

我也尝试过使用jquery get val（）函数，如下所示......

＆＃13;

 <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>

＆＃13;

查看我的HTML代码：

＆＃13;

 <?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>';
      }
      ?>

＆＃13;

Answer 1

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

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

为什么？

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

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

unCaught类型错误：无法读取属性＆＃39; null＆＃39; document.getElementByID（）。value的值;

1 个答案:

为什么？