get NaN everytime I try to put a variable as innertext of my element

Question

Basically, I want to get the textContent of an element which is a number, and another one from another element. Then sum them and store it as innertext of another element and display it to the browser, everytime I do so, the NaN appears instead of the number. (searched for many hours and didnt manage to find a solution)

let price = document.getElementById("productPrice").textContent;
let stack = document.getElementById("cartCounter").textContent;
let num = parseInt(price);
        let num2 = parseInt(stack);
        let sum = num * num2;
        alert(sum); //returns NaN
document.getElementById("finalPrice").innerText = num;

<div id="cartBox">
                <h5>Cart</h5>
                <hr>
                <img src="images/image-product-1.jpg" alt="#" id="test">
                <span id="priceBox">
                    <p>Fall Limited Edition Sneakers</p>
                    <span id="priceProduct">$125.00</span><span id="x">x</span><span id="productStack">3</span><span
                        id="finalPrice"></span>
                </span>

<span id="productPrice">$125.00</span><span id="discount">50%</span>
                <span id="productRealPrice"><del>$250.00</del></span>

<i class='bx bx-cart-alt' onclick="seeCart()"><span id="cartCounter">0</span></i>

I thought using Number() or parseInt() will solve my problem, but didn't.

try to use `parseInt(stack, 10)` instead of just `parseInt(stack)`. plus, add a `console.log(price, typeof price);` just before `num`'s declaration may help — Paul-Marie, Dec 29 '22 at 11:17
you probably have a strange content in your html elements you use for input. As said above you should share your full scenario — Diego D, Dec 29 '22 at 11:19
The debugger of your browser will tell you the source of that `NaN` — Andreas, Dec 29 '22 at 11:23
Add a `debugger;` and check the values. Also, please post the values of `console.log(JSON.stringify(price))` and the same for `stack`. With the quotes — adiga, Dec 29 '22 at 11:23
@adiga Nah, it can be `null`, that's why I suggested this call — Paul-Marie, Dec 29 '22 at 11:24
@Paul-Marie That's more than unlikely: _"If the node is a [`document`](https://developer.mozilla.org/en-US/docs/Web/API/Document) or a [doctype](https://developer.mozilla.org/en-US/docs/Glossary/Doctype), `textContent` returns `null`"_ ([Source](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)) — Andreas, Dec 29 '22 at 11:27
@Andreas Yeah I know, but without html we can't know for sure, and adding mere console.log is harmless — Paul-Marie, Dec 29 '22 at 11:29
You still have not shared what `cartCounter` is. But, `price` will be `parseInt("$250.00")` and that returns `NaN`. — adiga, Dec 29 '22 at 11:37
Duplicate of [How to convert a currency string to a double with Javascript?](https://stackoverflow.com/questions/559112) — adiga, Dec 29 '22 at 11:38

score 0 · Answer 1 · answered Dec 29 '22 at 11:20

0

If you have empty content then you will have NaN issue. Use cast to number with + notation, see snipped below

console.log(parseInt(""))
console.log(+"")

answered Dec 29 '22 at 11:20

Wojciech Parys

339
2
18

This is not OP's issue – adiga Dec 29 '22 at 11:37

get NaN everytime I try to put a variable as innertext of my element

1 Answers1