CODEWITHSUNDEEP
javascriptnan
Adunturidas
Adunturidas

Reputation: 27

calculating result number is NaN in javascript

when i only use calculating function, it works fine. but when i add input number comma function thing, it makes result number as NaN. how can i solve this problem?

here is my HTML

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <section class="form">
        <div class="container forms">
            <h3 class="first">chicken</h3>
            <input type="text" id="value1"/> times

            <h4 class="second">pizza</h4>
            <input type="text" id="value2"/> pieces
        </div>
        <button class="calculate" type="button" onclick="cal()">sum</button>
        <h5 id="result"></h5>
    </section>

her is my JS

            const cal = () => {
            const A = value1.value,
                B = value2.value;
            const res = A * (9 / 100) * (100 / B).toLocaleString();

            result.innerText = `you have ${new Intl.NumberFormat('ja-JP', {
                style: 'currency',
                currency: 'JPY',
            }).format(res)} Yen, sir.`;
        };
    

        $('input').keyup(function (event) {
            // skip for arrow keys
            if (event.which >= 37 && event.which <= 40) return;

            // format number
            $(this).val(function (index, value) {
                return value.replace(/\D/g, '').replace(/\B(?=(\d{3})+(?!\d))/g, ',');
            });
        });

thanks for your help.

Upvotes: 0

Views: 678

Answers (3)

anatolhiman
anatolhiman

Reputation: 1859

Before you format your number, you need to convert it to an actual number. It is a string when it comes from the form. You can convert it to a number by multiplying with 1 ( x * 1) or using the Number() method, for example. Or by any of the parse and Math functions here: https://stackabuse.com/javascript-convert-string-to-number/

Authoritative information about the Number() primitive wrapper object from MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number

Example:

// convert STRING '10.38899' to NUM 10.39:

const a = Number(input1.value).toFixed(2))

// convert STRING '10.38899' to NUM 10.38899

const b = parseFloat(input2.value)

// convert STRING '15.38899' to NUM 15

const c = parseInt(input3.value, 10)

// convert STRING '12.5' to NUM 12

const d = Math.floor(input4.value)

// convert STRING '12' to NUM 12 (most performant method)

const e = input5.value * 1

// Related: convert STRING '-12' to NUM 12 (convert to positive number)

const f = input6.value
const convertNeg = (x) => (Number(x) < 0) ? (x * -1) : Number(x)

convertNeg(f)

Upvotes: 4

fallenland
fallenland

Reputation: 525

Maybe clean values, so any character that isn't part of a valid number is removed. As an example.

function asNumber(value) {
    return Number(String(value).replace(/[^\d\.]+/g, ''));
}

Then you could pass in your values as:

const A = asNumber(value1.value),
      B = asNumber(value2.value);

Upvotes: 0

Berg_Durden
Berg_Durden

Reputation: 1781

Just use parseFloat to convert the inputs values to number. There is one point, if you want to use comma you need to replace it for a point, otherwise parseFloat will give you an integer:

const cal = () => {
            const A = parseFloat(value1.value.replace(/,/g, '.')),
                B = parseFloat(value2.value.replace(/,/g, '.'));
            const res = A * (9 / 100) * (100 / B).toLocaleString();
        };

Or do it that way, if you prefer:

    const cal = () => {
    const A = value1.value,
        B = value2.value;
    const res = parseFloat(A.replace(/,/g, '.')) * (9 / 100) * (100 / parseFloat(B.replace(/,/g, '.'))).toLocaleString();
};

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat

As said above, you can also use Number()

Upvotes: 0

Related Questions