Stack Exchange
Как избавиться от ошибки Uncaught TypeError: Cannot read properties of null (reading 'querySelector')?


let quantityButtons = document.querySelectorAll('.quantity-btn');
if (quantityButtons.length > 0) {
    for (let index = 0; index < quantityButtons.length; index++) {
        const quantityButton = quantityButtons[index];
        quantityButton.addEventListener("click", function (e) {
            let value = parseInt(quantityButton.closest('.quantity').querySelector('input').calue);
            if (quantityButton.classList.contains('quantity-btn.plus')) {
                value++;
            } else {
                value = value - 1;
                if (value < 1) {
                    value = 1
                }
            }
            quantityButton.closest('.quantity').querySelector('input').value = value;
        });
    }
}
.quatity {
  display: flex;
  align-items: center;
  position: relative;
  width: 125px;
}

.quantity-btn {
  position: absolute;
}
.quantity-btn:first-child {
  left: 10px;
}
.quantity-btn:last-child {
  right: 10px;
}

.minus {
  font-size: 20px;
}

.plus {
  font-size: 20px;
}

.input-quantity {
  display: flex;
}
.input-quantity > input {
  text-align: center;
  width: 125px;
  height: 50px;
  border: 1px solid #D7D7D7;
  border-radius: 8px;
  padding: 10px;
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 23px;
  -moz-appearance: textfield;
}
<div class="cart__quantity quatity">
    <button class="cart__quantity-btn quantity-btn minus">-</button>
    <div class="cart__quantity-input input-quantity">
        <input max="3" maxlength="3" autocomplete="off" type="number" name="form[]" value="1">
    </div>
    <button class="cart__quantity-btn quantity-btn plus">+</button>
</div>



На просторах интернета нашел код js для элемента подсчета количества, вставил его к себе в одном файле с остальным кодом js и jQuery, но выдает ошибку :

Uncaught TypeError: Cannot read properties of null (reading
'querySelector')

Помогите решить проблему, в js не силен

Чтобы исправить проблему, надо сделать так, чтобы элемент, на котором вызывается метод querySelector не был null. Как именно сделать - решать должны уже вы. Может быть это будет проверка на null и остановка дальнейшего выполнения кода, если так, а может ещё что-то
Также полезно будет: Как и какими средствами находить ошибки в Javascript коде?

Ещё стОит заметить, что quantity и quatity не одно и то же ;-)

Дополню ответ @Алексея Шиманского

Тут будет ошибка querySelector('input').calue); должно быть value
Так не найдет contains('quantity-btn.plus'), нужно quantityButton.classList.contains('plus'))

Рабочий пример:


let quantityButtons = document.querySelectorAll('.quantity-btn');

if (quantityButtons.length > 0) {
  for (let index = 0; index < quantityButtons.length; index++) {
    const quantityButton = quantityButtons[index];
    quantityButton.addEventListener("click", function(e) {

      let value = parseInt(quantityButton.closest('.quantity').querySelector('input').value);
      if (quantityButton.classList.contains('plus')) {
        value++;
      } else {
        value = value - 1;
        if (value < 1) {
          value = 1
        }
      }
      quantityButton.closest('.quantity').querySelector('input').value = value;
    });
  }
}
.quantity {
  display: flex;
  align-items: center;
  position: relative;
  width: 125px;
}

.quantity-btn {
  position: absolute;
}

.quantity-btn:first-child {
  left: 10px;
}

.quantity-btn:last-child {
  right: 10px;
}

.minus {
  font-size: 20px;
}

.plus {
  font-size: 20px;
}

.input-quantity {
  display: flex;
}

.input-quantity>input {
  text-align: center;
  width: 125px;
  height: 50px;
  border: 1px solid #D7D7D7;
  border-radius: 8px;
  padding: 10px;
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 23px;
  -moz-appearance: textfield;
}
<div class="cart__quantity quantity">
  <button class="cart__quantity-btn quantity-btn minus">-</button>
  <div class="cart__quantity-input input-quantity">
    <input max="3" maxlength="3" autocomplete="off" type="number" name="form[]" value="1">
  </div>
  <button class="cart__quantity-btn quantity-btn plus">+</button>
</div>



