Selecting an
element using getElemntsByClassName method

Question

I've only added a bit of the code. The cart_items contains more elements, that is the reason why I've taken it as an array. I've also tried to use multiple methods to select the elements, I've commented out because none of them worked and I wish to stick with the getElementByClassName method. The console log shows empty whenever I run this code. No value for price is shown.

function updateCartTotal() {
  var cartItemContainer = document.getElementsByClassName('cart_items')[0]
  var cartRows= cartItemContainer.getElementsByClassName('cart_item item_list d-flex flex-lg-row flex-column align-items-lg-center align-items-start justify-content-lg-end justify-content-start')
  //var cartRows = cartItemContainer.getElementsByTagName('LI')
  //var cartRows = cartItemContainer.getElementsByClassName('cart_item_list')
  //console.log(cartItemContainer)

  for (var i = 0; i < cartRows.length; i++) {
    var cartRow = cartRows[i]
    var priceElement = cartRow.getElementsByClassName('product_price product_text')[0]
    var price = priceElement.innerText
    console.log(price)
  }
}

<div class="cart_items">
  <ul class="cart_items_list">

    <!-- Cart Item -->
    <li class="cart_item item_list d-flex flex-lg-row flex-column align-items-lg-center align-items-start justify-content-lg-end justify-content-start">
      <div class="product d-flex flex-lg-row flex-column align-items-lg-center align-items-start justify-content-start mr-auto">
        <div>
          <div class="product_number">1</div>
        </div>
        <div>
          <div class="product_image"><img src="images/cart_item_1.jpg" alt=""></div>
        </div>
        <div class="product_name_container">
          <div class="product_name"><a href="product.html">Cool Flufy Clothing without Stripes</a></div>
          <div class="product_text">Second line for additional info</div>
        </div>
      </div>
      <div class="product_price product_text btn btn-danger">Remove</div>
      <div class="product_color product_text"><span>Color: </span>beige</div>
      <div class="product_size product_text"><span>Size: </span>L</div>
      <div class="product_price product_text"><span>Price: </span>$3.99</div>

      <div class="product_total product_text"><span>Total: </span>$3.99</div>
    </li>
  </ul>
</div>

*I wish to stick with the getElementByClassName method* <-- [No, you should NOT use this ancient method.](https://stackoverflow.com/questions/54952088/how-to-modify-style-to-html-elements-styled-externally-with-css-using-js/54952474#54952474) Use [`.querySelectorAll()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) instead. — Scott Marcus, Jan 03 '20 at 15:03
`getElementByClassName` returns a "live" list and takes in only one class, in your example is misused a bit. — Tiberiu C., Jan 03 '20 at 15:04
@ScottMarcus this ancient method is very fast in comparison with `querySelectorAll` :) — Tiberiu C., Jan 03 '20 at 15:05
@TiberiuC. [No, it's not. In fact, it's dramatically slower.](https://jsperf.com/live-node-list-vs-static-node-list) That's the problem with Live Node Lists. They give the impression of speed because they don't actually do anything until you interact with the list. Then, every time that you do, you wind up rescanning the DOM. Not to mention that if you only want the first match, it makes no sense to search the entire document, gather up all the matches and then throw all but the first one away. — Scott Marcus, Jan 03 '20 at 15:22

zetawars · Answer 1 · 2020-01-03T15:19:29.610

0

you shouldn't be using getElementbyClassName rather do this. Its way simpler. and should be good for your case too

use CSS selectors:

document.querySelectorAll('li.product_price.product_text');

edited Jan 03 '20 at 15:19

answered Jan 03 '20 at 15:08

zetawars

1,023
1
12
27

sorry. you meant the whitespace? I removed that. I dont think that chaining elementByTagName then elementbyClassName is any good. thats why i posted it. – zetawars Jan 03 '20 at 15:21

Tân · Answer 2 · 2020-01-03T15:32:24.673

You can use querySelector to find that element. In this case, I think you may want to get total price instead:

function updateCartTotal() {
  // var cartItemContainer = document.getElementsByClassName('cart_items');

  // you should use "querySelectorAll" instead of "getElementsByClassName"
  var cartItemContainer = document.querySelectorAll('.cart_items');
  
  for (var i = 0; i < cartItemContainer.length; i++) {
    var total = cartItemContainer[i].querySelector('.cart_item .product_total');
    
    console.log(total.innerText);
  }
}

updateCartTotal();

<div class="cart_items">
  <ul class="cart_items_list">

    <!-- Cart Item -->
    <li class="cart_item item_list d-flex flex-lg-row flex-column align-items-lg-center align-items-start justify-content-lg-end justify-content-start">
      <div class="product d-flex flex-lg-row flex-column align-items-lg-center align-items-start justify-content-start mr-auto">
        <div>
          <div class="product_number">1</div>
        </div>
        <div>
          <div class="product_image"><img src="images/cart_item_1.jpg" alt=""></div>
        </div>
        <div class="product_name_container">
          <div class="product_name"><a href="product.html">Cool Flufy Clothing without Stripes</a></div>
          <div class="product_text">Second line for additional info</div>
        </div>
      </div>
      <div class="product_price product_text btn btn-danger">Remove</div>
      <div class="product_color product_text"><span>Color: </span>beige</div>
      <div class="product_size product_text"><span>Size: </span>L</div>
      <div class="product_price product_text"><span>Price: </span>$3.99</div>

      <div class="product_total product_text"><span>Total: </span>$3.99</div>
    </li>
  </ul>
</div>

[`.getElementsByClassName()` should be avoided](https://stackoverflow.com/questions/54952088/how-to-modify-style-to-html-elements-styled-externally-with-css-using-js/54952474#54952474) and `.querySelectorAll()` should be used instead. Especially because of the loop. — Scott Marcus, Jan 03 '20 at 15:25

Scott Marcus · Answer 3 · 2020-01-03T15:26:40.487

Your code is way to over complicated. Just use .querySelector() and .querySelectorAll() and DO NOT use .getElementsByClassName().

function updateCartTotal() {
  // Use .querySelectorAll to get all elements that match the supplied CSS selector:
  var cartRows = document.querySelectorAll('.cart_items .cart_item')

  // Use .forEach on the resulting node list to more easily loop over the resulting elements
  cartRows.forEach(function(row) {
    // Use .textContent instead of .innerText
    var price = row.querySelector('.product_price.product_text:not(.btn)').textContent;
    console.log(price);
  });
}

updateCartTotal();

<div class="cart_items">
  <ul class="cart_items_list">

    <!-- Cart Item -->
    <li class="cart_item item_list d-flex flex-lg-row flex-column align-items-lg-center align-items-start justify-content-lg-end justify-content-start">
      <div class="product d-flex flex-lg-row flex-column align-items-lg-center align-items-start justify-content-start mr-auto">
        <div>
          <div class="product_number">1</div>
        </div>
        <div>
          <div class="product_image"><img src="images/cart_item_1.jpg" alt=""></div>
        </div>
        <div class="product_name_container">
          <div class="product_name"><a href="product.html">Cool Flufy Clothing without Stripes</a></div>
          <div class="product_text">Second line for additional info</div>
        </div>
      </div>
      <div class="product_price product_text btn btn-danger">Remove</div>
      <div class="product_color product_text"><span>Color: </span>beige</div>
      <div class="product_size product_text"><span>Size: </span>L</div>
      <div class="product_price product_text"><span>Price: </span>$3.99</div>

      <div class="product_total product_text"><span>Total: </span>$3.99</div>
    </li>
  </ul>
</div>

Selecting an element using getElemntsByClassName method

3 Answers3

Selecting an
element using getElemntsByClassName method