getElementsByClassName(…)[0] is undefined [duplicate]

so i’m trying to make a shopping cart that adds the product image,title,and price into the cart with the press of a button, yet when i press the button the image of the product will result in “getElementsByClassName(…)[0] is undefined” , i tried removing the line of code that adds the image and it worked just fine but why can`t i add the image? the shopping cart code has been used before on a different project and it worked just fine. i would add part of the html code and the javascript code below.
what i want to know is why is my image className not being defined? while the rest are all just fine.
i tried changing the name and nothing happened.

Html Code

<div
            class="col-6 col-md-4 col-lg-3 col-xs-6 mx-3 my-3"
            style="width: 224px"
          >
            <div class="product-card">
              <img
                src="/images/product-1.jpg"
                class="product-item-image card-img-top"
                style="width: 100%"
                src="..."
                alt="Card image cap"
              />
              <div class="info">
                <h3 class="px-2 product-item-title">Title</h3>
                <span class="price product-item-price px-2"
                  >300$
                  <button
                    class="btn btn-outline-danger btn-sm product-item-button"
                    style="margin-left: 45px; margin-bottom: 5px"
                    type="button"
                  >
                    Add To Cart
                  </button></span
                >
              </div>
            </div>
          </div>
          <div
            class="col-6 col-md-4 col-lg-3 col-xs-6 mx-3 my-3"
            style="width: 224px"
          >
            <div class="product-card">
              <img
                src="/images/product-2.jpg"
                class="product-item-image card-img-top"
                style="width: 100%"
                src="..."
                alt="Card image cap"
              />
              <div class="info">
                <h3 class="px-2 product-item-title">Title</h3>
                <span class="price product-item-price px-2"
                  >300$
                  <button
                    class="btn btn-outline-danger btn-sm product-item-button"
                    style="margin-left: 45px; margin-bottom: 5px"
                    type="button"
                  >
                    Add To Cart
                  </button></span
                >
              </div>
            </div>
          </div>

Javascript Code

//هذا الكود معناه انو السكربت ما لح يشتغل لحد ما الصفحة تحمل بالكامل
if (document.readyState == "loading") {
  document.addEventListener("DOMContentLoaded", ready);
} else {
  ready();
}
function ready() {
  var removeCartItemButtons = document.getElementsByClassName("btn-danger");
  for (var i = 0; i < removeCartItemButtons.length; i++) {
    var button = removeCartItemButtons[i];
    button.addEventListener("click", removeCartItem);
  }

  var quantityInputs = document.getElementsByClassName("cart-quantity-input");
  for (var i = 0; i < quantityInputs.length; i++) {
    var input = quantityInputs[i];
    input.addEventListener("change", quantityChanged);
  }

  var addToCartButtons = document.getElementsByClassName("product-item-button");
  for (var i = 0; i < addToCartButtons.length; i++) {
    var button = addToCartButtons[i];
    button.addEventListener("click", addToCartClicked);
  }

  document
    .getElementsByClassName("btn-purchase")[0]
    .addEventListener("click", purchaseClicked);
}
//هنا نكتب الدالة الي لح تظهر النه رسالة بعد ما يتم اكتمال عملية الشراء
function purchaseClicked() {
  alert("Thank you for your purchase");
  var cartItems = document.getElementsByClassName("cart-items")[0];
  while (cartItems.hasChildNodes()) {
    cartItems.removeChild(cartItems.firstChild);
  }
  updateCartTotal();
}
//هنا الدالة تختص ب ازالة القطعه من قائمة التسوق
function removeCartItem(event) {
  var buttonClicked = event.target;
  buttonClicked.parentElement.parentElement.remove();
  updateCartTotal();
}
//هنا الدالة الي تختص بحساب
function quantityChanged(event) {
  var input = event.target;
  if (isNaN(input.value) || input.value <= 0) {
    input.value = 1;
  }
  updateCartTotal();
}
//الدالة الخاصة بأضافة الغرض  الى القائمة
function addToCartClicked(event) {
  var button = event.target;
  var shopItem = button.parentElement.parentElement;
  var title =
    shopItem.getElementsByClassName("product-item-title")[0].innerText;
  var price =
    shopItem.getElementsByClassName("product-item-price")[0].innerText;
  var imageSrc = shopItem.getElementsByClassName("product-item-image")[0].src;
  addItemToCart(title, price, imageSrc);
  updateCartTotal();
}
//اضافة الغرض الى القائمة نفسها
function addItemToCart(title, price, imageSrc) {
  var cartRow = document.createElement("div");
  cartRow.classList.add("cart-row");
  var cartItems = document.getElementsByClassName("cart-items")[0];
  var cartItemNames = cartItems.getElementsByClassName("cart-item-title");
  for (var i = 0; i < cartItemNames.length; i++) {
    if (cartItemNames[i].innerText == title) {
      alert("This item is already added to the cart");
      return;
    }
  }
  //هنا نبلغ البرنامج انو يضيف الصورة والاسم والسعر للقائمة
  var cartRowContents = `
        <div class="cart-item cart-column">
            <img class="cart-item-image" src="${imageSrc}" width="100" height="100">
            <span class="cart-item-title">${title}</span>
        </div>
        <span class="cart-price cart-column">${price}</span>
        <div class="cart-quantity cart-column">
            <input class="cart-quantity-input" type="number" value="1">
            <button class="btn btn-danger" type="button">REMOVE</button>
        </div>`;
  cartRow.innerHTML = cartRowContents;
  cartItems.append(cartRow);
  cartRow
    .getElementsByClassName("btn-danger")[0]
    .addEventListener("click", removeCartItem);
  cartRow
    .getElementsByClassName("cart-quantity-input")[0]
    .addEventListener("change", quantityChanged);
}
//عملية جمع السعر لللحصول على السعر النهائي
function updateCartTotal() {
  var cartItemContainer = document.getElementsByClassName("cart-items")[0];
  var cartRows = cartItemContainer.getElementsByClassName("cart-row");
  var total = 0;
  for (var i = 0; i < cartRows.length; i++) {
    var cartRow = cartRows[i];
    var priceElement = cartRow.getElementsByClassName("cart-price")[0];
    var quantityElement = cartRow.getElementsByClassName(
      "cart-quantity-input"
    )[0];
    var price = parseFloat(priceElement.innerText.replace("$", ""));
    var quantity = quantityElement.value;
    total = total + price * quantity;
  }
  //السعر النهائي
  total = Math.round(total * 100) / 100;
  document.getElementsByClassName("cart-total-price")[0].innerText =
    "$" + total;
}