DOM 選擇器在 Vanilla JavaScript 中給出 null 但在 jquery 中工作

Question

我正在使用 vanilla JS 選擇一個 id，但是 ("qty").value; 給我空答案，但通過 jQuery 使用相同的代碼在我的 jQuery 代碼行之后工作正常

function manage_cart(pid, type) {
  if (type == 'update') {
    var qty = document.getElementById(pid + "qty").value;
  } else {
    var qty = jQuery("#qty").val();
  }

  var ajax = new XMLHttpRequest();
  ajax.open("post", "manage_cart.php", true);
  ajax.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      // Response
      var response = this.responseText;
      if (type == 'update' || type == 'remove') {
        window.location.href = 'cart.php';
      }
      document.querySelector('.cart-a span').innerHTML = response;
    }
  };
  
  var data = new URLSearchParams({
    pid,
    qty,
    type
  });
  ajax.send(data);
}

這是我的香草 JS 代碼

function manage_cart(pid, type) {
  if (type == 'update') {
    var qty = document.getElementById(pid + "qty").value;
  } else {
    var qty = document.getElementById('qty').value;
  }
  
  var ajax = new XMLHttpRequest();
  ajax.open("post", "manage_cart.php", true);
  ajax.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      // Response
      var response = this.responseText;
      if (type == 'update' || type == 'remove') {
        window.location.href = 'cart.php';
      }
      document.querySelector('.cart-a span').innerHTML = response;
    }
  };
  
  var data = new URLSearchParams({
    pid,
    qty,
    type
  });
  ajax.send(data);
}

我的 html 和 php 代碼看起來像這樣，其中每個產品的 id 不同，但 remove 確實需要選擇器中的 pid。

 <div class="basket-product-c">
      <?php
                                        if(isset($_SESSION['cart'])){
                                            foreach($_SESSION['cart'] as $key=>$val){
                                            $productArr=get_product($con,'','',$key);
                $price=$productArr[0]['price'];
                $qty=$val['qty'];
    ?>
        <div class="price-c"><?php echo $price?></div>
        <div class="quantity-c">
          <input type="number" class="quantity-field-c" id="<?php echo $key?>qty" value="<?php echo $qty?>"/>
          <br/><a href="javascript:void(0)" onclick="manage_cart('<?php echo $key?>','update')">update</a>
        </div>
        <div class="subtotal-c"><?php echo $qty*$price?></div>
        <div class="remove-c">
        <a href="javascript:void(0)" onclick="manage_cart('<?php echo $key?>','remove')">Remove</a>
        </div>
      
        <?php } } ?>

Answer 1

如果您將 var qty記錄到控制台，您得到的是空值，還是獲取元素？ 我能想到的為什么 vanilla js 版本不起作用的唯一原因是 jquery id 選擇器比 getElementById() 觸發得慢。 理想情況下，不會有什么區別，因為 jquery('#element') 在幕后使用 document.getElementById()。

也許按照@Elikill58 的建議去做，並通過將該行包裝在 setTimeout() 函數中來延遲選擇。

此外，如果沒有 value 屬性， getElementById().value 將返回 undefined ，如果該標簽存在 value 屬性，但沒有設置值，則返回空白。

如果選擇器根本沒有選擇該元素，您將獲得 null 作為響應。

試試這個，看看它是否有效：

function manage_cart(pid, type) {
  if (type == 'update') {
    var qty = document.getElementById(pid + "qty").value;
  } else {
    setTimeout(() => {
      var qty = document.getElementById('qty').value;
    }, 200)
  }

您可以調整延遲時間以找到最適合您的時間。