Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

184
Visualizações
Why is the '.value' property not working?
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 class="center-cart-items">
<div class="cart-row"> 
  <div class="cart-item cart-column"> 
    <img class="cart-item-image" src="#" width="100" height="100" /> 
    <span class="cart-item-title"> T-shirt</span> 
  </div> 
  <span class="cart-price cart-column"> $29.99</span> 
  <div class="cart-quantity cart-column"> 
    <input class="cart-quantity-input" type="number" value="2" /> 
    <button class="btn-remove" 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.

about 4 years ago · Juan Pablo Isaza
2 Respostas
Responde à pergunta

0

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 class="cart-row"> 
  <div class="cart-item cart-column"> 
    <img class="cart-item-image" src="#" width="100" height="100" /> 
    <span class="cart-item-title"> T-shirt</span> 
  </div> 
  <span class="cart-price cart-column"> $29.99</span> 
  <div class="cart-quantity cart-column"> 
    <input class="cart-quantity-input" type="number" value="2" /> 
    <button class="btn-remove" role="button">REMOVE</button>
  </div>   
</div>

about 4 years ago · Juan Pablo Isaza Relatório

0

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

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

<div class="center-cart-items">
  <div class="cart-row"> 
    <div class="cart-item cart-column"> 
      <img class="cart-item-image" src="#" width="100" height="100" /> 
      <span class="cart-item-title"> T-shirt</span> 
    </div> 
    <span class="cart-price cart-column"> $29.99</span> 
    <div class="cart-quantity cart-column"> 
      <input class="cart-quantity-input" type="number" value="2" /> 
      <button class="btn-remove" role="button">REMOVE</button>
    </div>   
  </div>
  <div class="cart-row"> 
    <div class="cart-item cart-column"> 
      <img class="cart-item-image" src="#" width="100" height="100" /> 
      <span class="cart-item-title"> T-shirt</span> 
    </div> 
    <span class="cart-price cart-column"> $29.99</span> 
    <div class="cart-quantity cart-column"> 
      <input class="cart-quantity-input" type="number" value="2" /> 
      <button class="btn-remove" role="button">REMOVE</button>
    </div>   
  </div>
  <div class="cart-row"> 
    <div class="cart-item cart-column"> 
      <img class="cart-item-image" src="#" width="100" height="100" /> 
      <span class="cart-item-title"> T-shirt</span> 
    </div> 
    <span class="cart-price cart-column"> $29.99</span> 
    <div class="cart-quantity cart-column"> 
      <input class="cart-quantity-input" type="number" value="2" /> 
      <button class="btn-remove" 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.

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda