Norseback
Reputation: 305
JavaScript cannot parse into Number
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>Upvotes: 0
Views: 550
Answers (5)
Abdennour TOUMI
Reputation: 93183
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
Upvotes: 0
Lew
Reputation: 1278
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.");
Upvotes: 2
Syam Pillai
Reputation: 5217
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 */
Upvotes: 0
Nicolas Henneaux
Reputation: 12215
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>Upvotes: 1
Nick Bull
Reputation: 9866
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.";
}
});
Upvotes: 1
Related Questions
- Javascript says number isn't in array?
- Parser not working properly
- Javascript parsing an integer from a string
- Javascript parse string to integer
- java script how to convert a string to number array
- Parse numbers from a string and push them to an array
- I am getting Parse error while parsing json when the key is a number
- Javascript Nan Error: parsing strings to ints
- Javascript parsing int
- parsing numbers in a javascript array