-2

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.

ikianm
  • 19
  • 6
  • 3
    Please create a [mre] by including your html – 0stone0 Dec 29 '22 at 11:16
  • 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
  • @Paul-Marie `typeof price` will always be string. – adiga Dec 29 '22 at 11:22
  • 1
    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
  • 1
    @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
  • @adiga upsi ! you'r right ! i miss-typed, sorry ! – Paul-Marie Dec 29 '22 at 11:32
  • 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

1 Answers1

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(+"")
Wojciech Parys
  • 339
  • 2
  • 18