CODEWITHSUNDEEP
javascriptjquery
Bryce Johnson
Bryce Johnson

Reputation: 6901

.toFixed() sets values to zero

I'm working on a simple calculator/converter. It takes pixel values and turns them into a ratio values, relative to one another.

Basically, I create an array with the input values, find the total of all values, divide each value by the total and then divide again by the minimum value, and then print them out on the right side.

Problem is, everything seems to work perfectly, but in the last for loop, when I use .toFixed() to round the numbers to a reasonable decimal place, all the numbers come out as 0.00. I used console.log to test the numbers after the math is performed, and it's right. But they're crazy-huge decimals. So I need to whittle them down.

Here's what it looks like, if it helps.calculator UI

Here's my code:

HTML: 

<div class="input-grid">
            <div class="input-row">
                <div class="input-box"><input type="text"><span class="input-unit">px</span></div>
                <i class="fa fa-chevron-right"></i>
                <span class="input-response">1.541</span>
            </div>
            <div class="input-row">
                <div class="input-box"><input type="text"><span class="input-unit">px</span></div>
                <i class="fa fa-chevron-right"></i>
                <span class="input-response">1.542</span>
            </div>
            <div class="input-row">
                <div class="input-box"><input type="text"><span class="input-unit">px</span></div>
                <i class="fa fa-chevron-right"></i>
                <span class="input-response">1.543</span>
            </div>
            <div class="input-row">
                <div class="input-box"><input type="text"><span class="input-unit">px</span></div>
                <i class="fa fa-chevron-right"></i>
                <span class="input-response">1.544</span>
            </div>
        </div>
        <div class="btn-wrap">
        <span class="calc-btn">calculate</span>
        <span class="reset-btn">reset</span>
        </div>

JS

$('.calc-btn').click(function(){

var inputs = [];
var total = 0;
    //put input values into an array

    $('.input-box input').each(function(){

        inputs.push($(this).val());
        total = total + ($(this).val());

    });

    //find the lowest value
    var minValue = Math.min.apply(Math,inputs); // get minimum value in array

    //calculation part
    for (i = 0; i < inputs.length; i++) {
           inputs[i] = ((inputs[i] / total) * 10)/ minValue;
    //the problem
           inputs[i] = inputs[i].toFixed(3);

    }
      //print answers
        $('span.input-response').each(function(i){
            $(this).text(inputs[i]);

         });

});

Any idea why this would be happening, and what I should do to fix it?

Upvotes: 2

Views: 835

Answers (3)

Friedrich
Friedrich

Reputation: 2290

your code is correct, probably the values of your input array are to small

Upvotes: 1

John S
John S

Reputation: 21482

I think you need to covert the values to numbers first using parseFloat():

var num = parseFloat($(this).val());

inputs.push(num);
total = total + num;

Otherwise, when you are setting total, you are just concatenating a string, which will become a very large number. Then when you divide by total, you get a very small number, which always ends up as 0.000 when you call toFixed().

Upvotes: 2

falinsky
falinsky

Reputation: 7428

due to toFixed() returns string representation of number - try explicit converting with parseFloat().

you can read more at toFixed

Upvotes: 1

Related Questions