Why is the '.value' property not working?-CodePudding

function updateCartTotal() {
  var cartItemContainer = document.getElementsByClassName('center-cart-items')[0]
  var cartRows          = cartItemContainer.getElementsByClassName('cart-row')
  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
    console.log(price * quantity)
  }
}

<div >
<div > 
  <div > 
    <img  src="#" width="100" height="100" /> 
    <span > T-shirt</span> 
  </div> 
  <span > $29.99</span> 
  <div > 
    <input  type="number" value="2" /> 
    <button  role="button">REMOVE</button>
  </div>   
</div>

When I run the code, I get a source error that says
Cannot read properties of undefined (reading 'value')
Not sure what is going on here, I am new to all of this and following guides to help me build.

CodePudding user response：

The bug occurs before the reference to cartRows. There is no .center-cart-items class in the snippet you gave, and if you delete the reference to it, your code works fine (see snippet).

Check your complete html source, the js reference to assign cartItemContainer is probably the problem.

function updateCartTotal() {
  //var cartItemContainer = document.getElementsByClassName('center-cart-items')[0]
  var cartRows          = document.getElementsByClassName('cart-row')
  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
    console.log(price * quantity)
  }
return (price * quantity);
}

console.log(updateCartTotal());

<div > 
  <div > 
    <img  src="#" width="100" height="100" /> 
    <span > T-shirt</span> 
  </div> 
  <span > $29.99</span> 
  <div > 
    <input  type="number" value="2" /> 
    <button  role="button">REMOVE</button>
  </div>   
</div>

CodePudding user response：

I have recreated your code in codePen and it works fine:

https://codepen.io/SweetChillyPhilly/pen/xxpjyNQ

<div >
  <div > 
    <div > 
      <img  src="#" width="100" height="100" /> 
      <span > T-shirt</span> 
    </div> 
    <span > $29.99</span> 
    <div > 
      <input  type="number" value="2" /> 
      <button  role="button">REMOVE</button>
    </div>   
  </div>
  <div > 
    <div > 
      <img  src="#" width="100" height="100" /> 
      <span > T-shirt</span> 
    </div> 
    <span > $29.99</span> 
    <div > 
      <input  type="number" value="2" /> 
      <button  role="button">REMOVE</button>
    </div>   
  </div>
  <div > 
    <div > 
      <img  src="#" width="100" height="100" /> 
      <span > T-shirt</span> 
    </div> 
    <span > $29.99</span> 
    <div > 
      <input  type="number" value="2" /> 
      <button  role="button">REMOVE</button>
    </div>   
  </div>
</div>

JS:

function updateCartTotal() {
  var cartItemContainer = document.getElementsByClassName('center-cart-items')[0]
  var cartRows          = cartItemContainer.getElementsByClassName('cart-row')
  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
    console.log(price * quantity)
  }
}

updateCartTotal();

Your console log is working as expected.

So i suspect your issue lies outside of this code.