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> Cuando ejecuto el código, aparece un error de fuente que dice
Cannot read properties of undefined (reading 'value')
No estoy seguro de lo que está pasando aquí, soy nuevo en todo esto y sigo guías para ayudarme a construir.
El error ocurre antes de la referencia a cartRows . No hay .center-cart-items en el fragmento que proporcionó, y si elimina la referencia, su código funciona bien (ver fragmento).
Verifique su fuente html completa, la referencia js para asignar cartItemContainer es probablemente el problema.
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>Recreé tu código en codePen y funciona bien:
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();El registro de su consola funciona como se esperaba.
Entonces sospecho que su problema está fuera de este código.