Блог

Главная - Вопросы по программированию - Селектор DOM, дающий значение null в ванильном JavaScript, но работающий в jquery

Селектор DOM, дающий значение null в ванильном JavaScript, но работающий в jquery

#javascript #php #jquery

Вопрос:

Я выбираю идентификатор с помощью vanilla JS, но («кол-во»).значение; дает мне нулевой ответ, но использование того же кода через 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 amp;amp; 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 amp;amp; 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-код выглядит следующим образом, в котором идентификатор отличается для каждого продукта, но для удаления требуется 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 } } ?>

Комментарии:

1. Вы уверены, что запустите функцию после добавления элемента в html ? (или подождите несколько мс)

2. да, я запускаю функцию после добавления элементов в корзину, я не знаю, почему работает код jQuery, но не JS

3. Как выглядит ваш HTML-код? Может быть, вы используете дубликаты удостоверений личности

4. Я отредактировал код, чтобы показать HTML

5. Можете ли вы также опубликовать отображаемый html-код из браузера? Я не вижу проблемы сразу. возможно, вы получили какие-то странные или повторяющиеся значения из своей сессии или базы данных. Может быть, также совет для тех случаев, когда вы используете PHP в своем HTML-шаблоне. Вместо if () { ?> html <?php } вас также можно было бы использовать if (): ?> html <?php endif; ?> и для <?php echo $var ?> вас можно было бы использовать <?= $var ?>

Ответ №1:

Если вы регистрируете var qty в консоли, получаете ли вы значение null или это захват элемента? Единственная причина, по которой я могу подумать о том, почему версия vanilla js не работает, заключается в том, что селектор идентификаторов jquery срабатывает медленнее, чем getElementById(). В идеале разницы не было бы, так как jquery («#элемент») использует document.getElementById() под колпаком.

Возможно, сделайте так, как предложил @Elikill58, и отложите выбор, обернув эту строку в функцию setTimeout ().

Кроме того, getElementById().значение будет возвращено неопределенным, если нет атрибута значения, или пустым, если для этого тега присутствует атрибут значения, но нет набора значений.

Если элемент вообще не выбирается селектором, в качестве ответа вы получите значение 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)
  }

Вы можете поиграть со временем задержки, чтобы найти тот, который идеально подходит для вас.

Метки: , ,