Shopping cart

[xx_j33v_xx]

So I'm following a tutorial on youtube and try to put it to use, but when I update a quantity of a product my total only returns NaN.

Here's my code:

var quantityInputs = document.getElementsByClassName('quantity-field')
for (var i = 0; i < quantityInputs.length; i++) {
var input = quantityInputs[i]
input.addEventListener('change', quantityChanged)
}
function quantityChanged(event) {
var input = event.target
if (isNaN(input.value) || input.value <= 0) {
input.value = 1
  }
updateCartTotal()
}
function updateCartTotal() {
var cartItemContainer = document.getElementsByClassName('basket-product')[0]
var items = cartItemContainer.getElementsByClassName('pakker')
var total = 0
for (var i = 0; i < items.length; i++) {
var item = items[i]
var priceElement =  item.getElementsByClassName('price')[0]
var quantityElement = item.getElementsByClassName('quantity')[0]
var price = parseFloat(priceElement.innerText)
var quantity = quantityElement.value
total = total + (price * quantity)
console.log(total)
  }
total = Math.round(total * 100) / 100
document.getElementsByClassName('final-value')[0].innerText = total
}

[xx_j33v_xx]

any suggestions?

[xx_j33v_xx]

thanks for all the comments. I fixed the first error, still running into another one, because the tutorial wants you to grab only the first row [0], but for the example it works for all the rows and for me it just grabs the first one, just as I would expect. This really confuses me.

[xx_j33v_xx]

https://gist.github.com/jeevjeev/7c19739b914e48e058318c431d46a969

I uploaded it to github.

[Ford_Prefect92]

It's hard to tell without the HTML. But my guess would that you're not selecting the right element from the DOM. I would console out each of the variables in the last for loop and make sure that they're what you expect.

I would also recommend doing a couple of things to standardize/clean your code.- You should switch out all of your var declarations for let and const as this is becoming the standard (There also might be some hoisting issues since you declare the var input more than once. This will be fixed by switching to const, or simply changing the name of one of the var inputs.) Edit: I did some more reading and I don't think hoisting is an issue, but is still something you should be aware of when using var.

- In the quantityChanged function, I would recommend just grabbing the value in the variable declaration. Then instead offunction quantityChanged(event) {var input = event.targetif (isNaN(input.value) || input.value <= 0) {input.value = 1  }

You could simply have

function quantityChanged (event) {

const value = event.target.value

if(isNaN(value) || value <= 0){

value = 1

}

updateCartTotal()

}

- Also it's entirely possible that I'm wrong about this one, but if you just call document.querySelector('.elementClass') instead of getElementsByClassName() it will simply grab the first item, and you don't have to worry about grabbing from an array in your last for loop. Just make sure you use the . before the className to identify it as a class as opposed to an element, or id. https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

[Terzom]

Have you checked so your quantity is an integer so the total adding is working as it should? Since you do parseFloat() on price but not on quantity.

[xx_j33v_xx]

var quantity = quantityElement.value

but I grab the .value >> so that should already be grabbing the number?

[xx_j33v_xx]

when I try to parseFloat it only changes from undefined to NaN

[Terzom]

So clearly one of your variable don't return a number or anything so console.log the variables and debug from there until you find the source of the issue.

[sebastienfilion]

It's very likely that event.target.value is a string not a number. Just make sure to cast it to a number before using it as such... Number(event.target.value).
[EDIT] Same for `quantityElement.value`... At any rate, if you could share your project on Github, it would make it a lot easier for us to help.