How to access a CSS class in javascript?-CodePudding

I am trying to access two HTML file classes in one javascript file. addToCartClicked(event) function is used to access index.html classes and addItemToCart() is used to access cart.html classes but addItemToCart() function does not access the .cart-items class and gives me null message. Although it is not empty. You can see it in cart.html.

I have another function that is also used for cart.html to calculate the total price of products and when I use the cart-items class, it works fine and print the result also

This function selects the index.html classes

function addToCartClicked(event) {
    var button = event.target;
    var shopItem = button.parentElement.parentElement.parentElement.parentElement
    var title = shopItem.querySelector(".name-of-product").innerText
    var price = shopItem.querySelector(".product-price").innerText
    var image = shopItem.querySelector(".hover-img").src
    addItemToCart();
}

This function selects the cart.html class

function addItemToCart() {
    var cartItems = document.querySelector(".cart-items")
    console.log(cartItems);
}

cart.html

<tbody > 
    <tr >
        <td  data-title="No"><img src="../../static/images/32.jpg" alt="#"></td>
        <td  data-title="Description">
            <p ><a href="#">Women Dress</a></p>
            <p >Maboriosam in a tonto nesciung eget distingy magndapibus.</p>
        </td>
        <td  data-title="Price"><span>$200.00</span></td>
        <td  data-title="Qty"><!-- Input Order -->
            <div >
                <div >
                    <button type="button"  disabled="disabled" data-type="minus" data-field="quant[2]">
                        <i ></i>
                    </button>
                </div>
                <input type="text" name="quant[2]"   data-min="1" data-max="100" value="2">
                <div >
                    <button type="button"  data-type="plus" data-field="quant[2]">
                        <i ></i>
                    </button>
                </div>
            </div>
         <!--/ End Input Order -->
        </td>
        <td  data-title="Total"><span>$200.00</span></td>
        <td  data-title="Remove"><a><i ></i></a></td>
    </tr>
</tbody>

CodePudding user response：

Change in HTML

I think you forget to add the table tag. I added the table tag and it gives the result

      <html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
  <table>
    <tbody >
      <tr >
        <td  data-title="No"><img src="../../static/images/32.jpg" alt="#"></td>
        <td  data-title="Description">
          <p ><a href="#">Women Dress</a></p>
          <p >Maboriosam in a tonto nesciung eget distingy magndapibus.</p>
        </td>
        <td  data-title="Price"><span>$200.00</span></td>
        <td  data-title="Qty">
          <!-- Input Order -->
          <div >
            <div >
              <button type="button"  disabled="disabled" data-type="minus"
                data-field="quant[2]">
                <i ></i>
              </button>
            </div>
            <input type="text" name="quant[2]"  data-min="1" data-max="100" value="2">
            <div >
              <button type="button"  data-type="plus"
                data-field="quant[2]">
                <i ></i>
                sdfdsf
              </button>
            </div>
          </div>
          <!--/ End Input Order -->
        </td>
        <td  data-title="Total"><span>$200.00</span></td>
        <td  data-title="Remove"><a><i ></i></a></td>
      </tr>
    </tbody>
  </table>
</body>

</html>

<script>

  var cartItems = document.querySelector(".cart-items")
  console.log(cartItems);

</script>

CodePudding user response：

function addItemToCart() {
    var cartItems = document.querySelector("table .cart-items");
    console.log(cartItems);
}

CodePudding user response：

If you import the JavaScript file in two html files(index.html, cart.html), you will access these functions.

and then you can select your tags :

    function addItemToCart() {
        var cartItems = document.getElementsByClassName("cart-items")
        var cartItems = document.querySelectorAll("tbody.cart-items");
        console.log(cartItems);
    }

CodePudding user response：

you have to create one .js file and put all JavaScript code in this file and this file load on to index.html and cart.html in both file.