Kevin Powell - Community•2y ago

innerText is undefined

I am trying to code a very basic shop for a school project and I tried to get the price of a product by using innerText in a function to update the total price in the cart but when I checked in the console I get this error: caught TypeError: Cannot read properties of undefined (reading 'innerText') The function code:

function updateTotal() {
  let cartItemContainer = document.getElementsByClassName("cart-table")[0];
  let cartRows = cartItemContainer.getElementsByClassName("cart-row");
  for (let i = 0; i < cartRows.length; i++) {
    let cartRow = cartRows[i];
    let priceElement = cartRow.getElementsByClassName("cart-price")[0];
    let amountElement = cartRow.getElementsByClassName("amount-input")[0];
    let price = priceElement.innerText;
  }
}

function updateTotal() {
  let cartItemContainer = document.getElementsByClassName("cart-table")[0];
  let cartRows = cartItemContainer.getElementsByClassName("cart-row");
  for (let i = 0; i < cartRows.length; i++) {
    let cartRow = cartRows[i];
    let priceElement = cartRow.getElementsByClassName("cart-price")[0];
    let amountElement = cartRow.getElementsByClassName("amount-input")[0];
    let price = priceElement.innerText;
  }
}

16 Replies

Jochem•2y ago

that likely maens cartRow.getElementsByClassName("cart-price")[0] is undefined, so it didn't find anything

8OP•2y ago

but I do get an output to the console when I do console.log(priceElement); I get this: <td class="cart-price">$699</td>

Jochem•2y ago

it's probably best to make a codepen then, without the code running or at least being able to see the HTML, I don't have any other ideas

8OP•2y ago

Jochem•2y ago

unless you retyped the code up there and there's a typo somewhere

8OP•2y ago

I just need to warn you that the design is terrible

Jochem•2y ago

I'm mostly a backend developer, I won't judge

8OP•2y ago

I like the backend more but I'm still at the very start so I don't know what comes next in this area https://codepen.io/SuperTesmon/pen/ZEqgZxK

Jochem•2y ago

You're getting TypeError: priceElement is undefined because cartRows includes the cart header, which also has the class cart-row on there when you have the console.log uncommented, you get three results, one undefined, and two rows (which are the two items in the cart already) when you have the let price line uncommented, you're getting one error because the header row doesn't have a cart-price element the error then stops execution of the click handler. If you use the optional chaining syntax:

    let price = priceElement?.innerText;

    let price = priceElement?.innerText;

you get undefined, $699, $699 instead the solution is to skip the first row somehow, either by removing the cart-price class, or starting your for loop at 1 instead of 0 so you skip the first result You may want to take a look at querySelector / querySelectorAll over getElementBy* https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

8OP•2y ago

I removed the cart-price class because it's much easier and I think starting from 1 in the loop could make it riskier later when I add more code

Jochem•2y ago

cool

8OP•2y ago

Thank you very much

Jochem•2y ago

no problem, glad to help 🙂

8OP•2y ago

Is there any way to close the thread with commands or something or I just need to mark it as solved?

Jochem•2y ago

just mark it as solved, it'll get archived eventually I see you already added the tag, so you're all set 🙂

8OP•2y ago

Yes, thank you again

Gaming

Programming

innerText is undefined