JavaScript cannot parse into Number

Question

I'm trying to make the total change based on the search criteria that I have on the FORM AREA. However, for some reason it doesn't parse the string into an array and the total is not displayed properly it has something like e+88 at the end. Totally a newbie at this.

$('.btn-primary').click(function() {
    var month = $('#inputMonth').val(); // get option value for month
    if (month == 'none') month = '';
    var year = $('#inputYear').val(); // get option value for year
    if (year == 'none') year = '';
    var arr = [];
    var totalPrice = 0;
    var price;
    
    // problematic part
    $('figure.col-sm-3').has('tr:last-child>td:last-child:contains(' + year + ')').has('tr:last-child>td:last-child:contains(' + month + ')').each(function () {
        arr.push($('tr.price td:nth-child(even)').text()); // adds each element to array 'arr'
        price = $('tr.price td:nth-child(even)').text();
        totalPrice += Number(price); // parse into an Integer then do the adding
        document.getElementById("displayTotal").innerHTML = "Total amount is currently at <b>"+totalPrice+ "</b> PHP."; // problematic part.
    });
    
    // this snippet works fine
    $('figure.col-sm-3')
        .hide() // hide all of them, and then show if both `has` are true
        .has('tr:last-child>td:last-child:contains(' + year + ')')
        .has('tr:last-child>td:last-child:contains(' + month + ')')
        .show();
        
    return false; // to avoid that button submits the form
});

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

<section class="container">
    <div class="row">
    <!-- FORM AREA -->
        <p id="displayTotal"></p> <!-- display the total here -->
        <p>Show items by:</p>
        <form class="form-horizontal">
            <div class="form-group">
            <label for="inputMonth" class="col-sm-2 control-label">Select Month</label>
                <div class="col-sm-10">
                    <select class="form-control" id="inputMonth">
                        <option value="none"> - </option>
                        <option value="January">January</option>
                        <option value="February">February</option>
                        <option value="March">March</option>
                        <option value="April">April</option>
                        <option value="May">May</option>
                        <option value="June">June</option>
                        <option value="July">July</option>
                        <option value="August">August</option>
                        <option value="September">September</option>
                        <option value="October">October</option>
                        <option value="November">November</option>
                        <option value="December">December</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label for="inputYear" class="col-sm-2 control-label">Select Year</label>
                <div class="col-sm-10">
                    <select class="form-control" id="inputYear">
                        <option value="2014">2014</option>
                        <option value="2015">2015</option>
                        <option value="2016">2016</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button class="btn btn-primary">Show results</button>
                </div>
            </div>
        </form>
    </div>
</section>

<section class="container">
    <div class="row"> <!-- FIRST SET OF ITEMS -->
        <figure class="col-sm-3 thumbnail">
            <h6 class="text-center text-uppercase">Item 1</h6>
            <img src="img1.jpg" />
                <table class="table">
                    <tr class="price">
                        <td>Price</td>
                        <td>250</td>
                    </tr>
                    <tr>
                        <td>Condition</td>
                        <td>new</td>
                    </tr>
                    <tr>
                        <td>Size</td>
                        <td>36</td>
                    </tr>
                    <tr>
                        <td>Sold on</td>
                        <td>November 7, 2014</td>
                    </tr>
                </table>
        </figure>
        <figure class="col-sm-3 thumbnail">
            <h6 class="text-center text-uppercase">Item 2</h6>
            <img src="img2.jpg" />
                <table class="table">
                    <tr class="price">
                        <td>Price</td>
                        <td>250</td>
                    </tr>
                    <tr>
                        <td>Condition</td>
                        <td>new</td>
                    </tr>
                    <tr>
                        <td>Size</td>
                        <td>36</td>
                    </tr>
                    <tr>
                        <td>Sold on</td>
                        <td>December 2, 2014</td>
                    </tr>
                </table>
        </figure>
        <figure class="col-sm-3 thumbnail">
            <h6 class="text-center text-uppercase">Item 3</h6>
            <img src="img3.jpg" />
                <table class="table">
                    <tr class="price">
                        <td>Price</td>
                        <td>250</td>
                    </tr>
                    <tr>
                        <td>Condition</td>
                        <td>new</td>
                    </tr>
                    <tr>
                        <td>Size</td>
                        <td>L</td>
                    </tr>
                    <tr>
                        <td>Sold on</td>
                        <td>February 19, 2015</td>
                    </tr>
                </table>
        </figure>
        <figure class="col-sm-3 thumbnail">
            <h6 class="text-center text-uppercase">Item 4</h6>
            <img src="img4.jpg" />
                <table class="table">
                    <tr class="price">
                        <td>Price</td>
                        <td>250</td>
                    </tr>
                    <tr>
                        <td>Condition</td>
                        <td>new</td>
                    </tr>
                    <tr>
                        <td>Size</td>
                        <td>XL</td>
                    </tr>
                    <tr>
                        <td>Sold on</td>
                        <td>February 19, 2015</td>
                    </tr>
                </table>
        </figure>
    </div>
</section>

Try parseInt() developer.mozilla.org/en/docs/Web/JavaScript/Reference/… — IronAces
– IronAces, Commented Aug 5, 2016 at 10:13
This "arr.push($('tr.price td:nth-child(even)').text());" is adding things like this into the array: "250250250250". — Vicente Olivert Riera
– Vicente Olivert Riera, Commented Aug 5, 2016 at 10:38

Lew · Accepted Answer · 2016-08-05 10:39:26Z

2

The problem was that you were accessing all elements with that class rather than those scoped to the current element in the iteration. You were therefore getting the price repeated over and over. I have a amended the code and removed the mixed vanilla javascript to keep things uniform. I have also moved the setting of the total price text outside of the loop to stop needlessly setting it over and over again. Code:

$('figure.col-sm-3').has('tr:last-child>td:last-child:contains(' + year + ')').has('tr:last-child>td:last-child:contains(' + month + ')').each(function(index, self) {
            var price = $(self).find("tr.price td:nth-child(even)").eq(0).text()
        arr.push(price);
        totalPrice += parseFloat( price );
    });
    $("#displayTotal").html("Total amount is currently at <b>" + totalPrice + "</b> PHP.");

answered Aug 5, 2016 at 10:39

Lew

1,2788 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Norseback Over a year ago

Nicolas Henneaux's answer worked too but if the results showed no items, the result wouldn't update to reflect the each items' prices. This answer filled that gap up. Thank you very much!

Nick Bull · Accepted Answer · 2016-08-05 10:23:20Z

1

From the problematic part to the end of the problematic part, try this instead:

// Comment in JavaScript are prefixed by //
$('figure.col-sm-3').each(function(e) {
    var soldOn = e.children('tr').last().children('td').last().val();

    if ($soldOn.indexOf(year) >= 0 && $soldOn.indexOf(month)) {
        var price = e.children('tr.price').first().children('td').last().val();

        arr.push(price); // Adds each element to array 'arr'
        totalPrice += price;

        document.getElementById("displayTotal").innerHTML = "Total amount is currently at <b>"+totalPrice+ "</b> PHP.";
    }
});

answered Aug 5, 2016 at 10:23

Nick Bull

9,9567 gold badges39 silver badges68 bronze badges

Comments

Nicolas Henneaux · Accepted Answer · 2016-08-05 10:34:18Z

You have to iterate over elements instead of parsing the text value of the array of elements.

$('.btn-primary').click(function() {
    var month = $('#inputMonth').val(); // get option value for month
    if (month == 'none') month = '';
    var year = $('#inputYear').val(); // get option value for year
    if (year == 'none') year = '';
    var arr = [];
    var totalPrice = 0.00;
    var price;
    
    // problematic part
document.getElementById("displayTotal").innerHTML = "Total amount is currently at <b>"+totalPrice+ "</b> PHP.";

    $('figure.col-sm-3').has('tr:last-child>td:last-child:contains(' + year + ')').has('tr:last-child>td:last-child:contains(' + month + ')').each(function (_index, element) {
$(element).find('tr.price td:nth-child(even)').each(function(_i, element){
    totalPrice += parseFloat(element.textContent);
    });
         // parse into an Integer then do the adding
        document.getElementById("displayTotal").innerHTML = "Total amount is currently at <b>"+totalPrice+ "</b> PHP."; // problematic part.
    });
    
    // this snippet works fine
    $('figure.col-sm-3')
        .hide() // hide all of them, and then show if both `has` are true
        .has('tr:last-child>td:last-child:contains(' + year + ')')
        .has('tr:last-child>td:last-child:contains(' + month + ')')
        .show();
        
    return false; // to avoid that button submits the form
});

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

<section class="container">
    <div class="row">
    <!-- FORM AREA -->
        <p id="displayTotal"></p> <!-- display the total here -->
        <p>Show items by:</p>
        <form class="form-horizontal">
            <div class="form-group">
            <label for="inputMonth" class="col-sm-2 control-label">Select Month</label>
                <div class="col-sm-10">
                    <select class="form-control" id="inputMonth">
                        <option value="none"> - </option>
                        <option value="January">January</option>
                        <option value="February">February</option>
                        <option value="March">March</option>
                        <option value="April">April</option>
                        <option value="May">May</option>
                        <option value="June">June</option>
                        <option value="July">July</option>
                        <option value="August">August</option>
                        <option value="September">September</option>
                        <option value="October">October</option>
                        <option value="November">November</option>
                        <option value="December">December</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label for="inputYear" class="col-sm-2 control-label">Select Year</label>
                <div class="col-sm-10">
                    <select class="form-control" id="inputYear">
                        <option value="2014">2014</option>
                        <option value="2015">2015</option>
                        <option value="2016">2016</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button class="btn btn-primary">Show results</button>
                </div>
            </div>
        </form>
    </div>
</section>

<section class="container">
    <div class="row"> <!-- FIRST SET OF ITEMS -->
        <figure class="col-sm-3 thumbnail">
            <h6 class="text-center text-uppercase">Item 1</h6>
            <img src="img1.jpg" />
                <table class="table">
                    <tr class="price">
                        <td>Price</td>
                        <td>250</td>
                    </tr>
                    <tr>
                        <td>Condition</td>
                        <td>new</td>
                    </tr>
                    <tr>
                        <td>Size</td>
                        <td>36</td>
                    </tr>
                    <tr>
                        <td>Sold on</td>
                        <td>November 7, 2014</td>
                    </tr>
                </table>
        </figure>
        <figure class="col-sm-3 thumbnail">
            <h6 class="text-center text-uppercase">Item 2</h6>
            <img src="img2.jpg" />
                <table class="table">
                    <tr class="price">
                        <td>Price</td>
                        <td>250</td>
                    </tr>
                    <tr>
                        <td>Condition</td>
                        <td>new</td>
                    </tr>
                    <tr>
                        <td>Size</td>
                        <td>36</td>
                    </tr>
                    <tr>
                        <td>Sold on</td>
                        <td>December 2, 2014</td>
                    </tr>
                </table>
        </figure>
        <figure class="col-sm-3 thumbnail">
            <h6 class="text-center text-uppercase">Item 3</h6>
            <img src="img3.jpg" />
                <table class="table">
                    <tr class="price">
                        <td>Price</td>
                        <td>250</td>
                    </tr>
                    <tr>
                        <td>Condition</td>
                        <td>new</td>
                    </tr>
                    <tr>
                        <td>Size</td>
                        <td>L</td>
                    </tr>
                    <tr>
                        <td>Sold on</td>
                        <td>February 19, 2015</td>
                    </tr>
                </table>
        </figure>
        <figure class="col-sm-3 thumbnail">
            <h6 class="text-center text-uppercase">Item 4</h6>
            <img src="img4.jpg" />
                <table class="table">
                    <tr class="price">
                        <td>Price</td>
                        <td>250</td>
                    </tr>
                    <tr>
                        <td>Condition</td>
                        <td>new</td>
                    </tr>
                    <tr>
                        <td>Size</td>
                        <td>XL</td>
                    </tr>
                    <tr>
                        <td>Sold on</td>
                        <td>February 19, 2015</td>
                    </tr>
                </table>
        </figure>
    </div>
</section>

Syam Pillai · Accepted Answer · 2016-08-05 10:34:38Z

0

Try parseInt or parseFloat. Better choice is parseInt

totalPrice += parseInt(price)

OR

totalPrice += parseFloat(price)

Finish by rounding the final total to a suitable decimal precision (2 makes sense in most cases regarding currency!)

totalPrice = totalPrice.toFixed(2) /* only in case of parseFloat */

edited Aug 5, 2016 at 10:34

answered Aug 5, 2016 at 10:18

Syam Pillai

5,2202 gold badges31 silver badges43 bronze badges

3 Comments

IronAces Over a year ago

I didn't downvote, but I wouldn't have used toFixed(0) per increment. It makes more sense to round up the total value to 2 decimal places once the total has been fully incremented rather than rounded per loop

Nick Bull Over a year ago

Just a guess... A) This answer is in the comments, 6 minutes before you answered. B) This doesn't answer the question - he gets an error parsing an integer, but clearly his code is the problem - not that he doesn't know how to parse an integer. If you say to me "a bridge is falling down, two of the big screws fell out!" and you asked for my help and I said "you can hammer a nail using a hammer", that's not a solution to the problem, that's pointing out the obvious on how to hammer a nail into something.

Syam Pillai Over a year ago

Yeah, you can change the decimal value as per your requirement. My concern with toFixed was only to let you remember that parseInt will not give any decimal part.

Abdennour TOUMI · Accepted Answer · 2016-08-05 10:49:58Z

0

var total= Array.from(
                $('figure').filter((i,e)=>{
                  var html=$(e).find('tr:eq(3) td:eq(1)').html();
                  return html.toLowerCase().indexOf($('#inputMonth').val().toLowerCase())>=0 &&  html.indexOf($('#inputYear').val())>=0

                })
           ).map((e)=>parseInt($(e).find('tr:eq(0) td:eq(1)').html())
           ).reduce((a,b)=>a+b,0)

DEMO

Don't make mistakes in Selector , MEANS , Get the expected result

edited Aug 5, 2016 at 10:49

answered Aug 5, 2016 at 10:42

Abdennour TOUMI

94.6k42 gold badges271 silver badges274 bronze badges

Collectives™ on Stack Overflow

JavaScript cannot parse into Number

5 Answers 5

1 Comment

Comments

Comments

3 Comments

DEMO

Don't make mistakes in Selector , MEANS , Get the expected result

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

3 Comments

Don't make mistakes in Selector , MEANS , Get the expected result

Comments

Your Answer

Sign up or log in

Post as a guest

Related