Add values together using jquery - javascript

I have 3 span tags that hold the price for each item and shipping. I need to add the three span tags together to come up with the total price using jQuery. Here is my code:
<div id="relative">
<div id="absolute">
Widget 1: <span id="widget_1_price">$99.99</span><br />
Widget 2: <span id="widget_2_price">$14.99</span><br />
Shipping Fee: <span id="shipping_price">$10.00</span><br />
<b>Total: <span id="total_price"></span></b>
</div>
</div>
I have tried several methods but none seem to work for me.

Loop through the elements and parse the text in them, and add them together:
var sum = 0;
$('#widget_1_price,#widget_2_price,#shipping_price').each(function(){
sum += parseFloat($(this).text().substr(1));
});
$('#total_price').text('$' + Math.round(sum * 100) / 100);
Demo: http://jsfiddle.net/QTMsE/

var val1 = parseFloat($("#widget_1_price").text().substring(1));
var val2 = parseFloat($("#widget_2_price").text().substring(1));
var shipping = parseFloat($("#shipping_price").text().substring(1));
var all = val1 + val2 + shipping;
$("#total_price").text("$"+all);
Try this.

Try this:
total = parseFloat($('#widget_1_price').text().slice(1))+
parseFloat($('#widget_2_price').text().slice(1))+
parseFloat($('#shipping_price').text().slice(1));
$('#total_price').text('$'+total);

Related

Read the content of a child of a child with javascript

i'd like to create a function that gets prices as dynamic content and calculates an installment payment. I tried several approaches but they do not work. Unfortunately i don't get an error msg.
Maybe you could help my drenched brain a bit. Thank you a lot in advance
var wrapper = document.getElementsByClassName('article-price')[0];
var secondwrapper = wrapper.getElementsByTagName('span')[0];
var price = secondwrapper.getElementsByTagName('span')[0];
var installment = document.getElementById('installment');
installment.innerHTML = (price.innerHTML / 12).toFixed(2);
<span class="article-price">
<span>
<span>149,99</span>
<span>€</span>
</span>
</span>
<div>your installment is <span id="installment"></span></div>
Replace var price = secondwrapper.getElementsByTagName('span')[0]; by var price = parseFloat(secondwrapper.getElementsByTagName('span')[0].innerHTML.replace(',','.')); to get the content of your span and replace comma by point to get the string as float number.
If you don't replace replace the comma by a point, JavaScript won't understand that '149,99' is a number and will only keep '149' because , is not recognized as decimal separator, while . is.
getElementsByTagName will give you the whole tag and not only the value inside as you wanted. Then in last line, remove price.innerHTML to price because you already converted it earlier.
Here's a snippet to help you
var wrapper = document.getElementsByClassName('article-price')[0];
var secondwrapper = wrapper.getElementsByTagName('span')[0];
var price = parseFloat(secondwrapper.getElementsByTagName('span')[0].innerHTML.replace(',','.'));
var installment = document.getElementById('installment');
installment.innerHTML = parseFloat(price / 12).toFixed(2) + " €";
<span class="article-price">
<span>
<span>149,99</span>
<span>€</span>
</span>
</span>
<div>your installment is <span id="installment"></span></div>
I hope my answer helped you !
var wrapper = document.getElementsByClassName('article-price')[0];
var secondwrapper = wrapper.getElementsByTagName('span')[0];
var price = secondwrapper.getElementsByTagName('span')[0];
var installment = document.getElementById('installment');
installment.innerHTML = (parseFloat(price.innerHTML) / 12).toFixed(2);
<span class="article-price">
<span>
<span>149,99</span>
<span>€</span>
</span>
</span>
<div>your installment is <span id="installment"></span></div>
Could it be the comma inside the span throwing things out. Not sure if it will work but you could try parseFloat, which should read it as a number or parseInt;
You need to change last line of code only:
installment.innerHTML = (parseFloat(price.innerHTML.replace(/\,/g,"")) / 12).toFixed(2);
Please check the below code it might help
$(document).ready(function(){
var wrapper = document.getElementsByClassName('article-price');
alert(wrapper);
var secondwrapper = wrapper[0].getElementsByTagName('span')[0];
alert(secondwrapper.innerHTML);
var price = secondwrapper.getElementsByTagName('span')[0];
alert(price.innerHTML);
var installment = document.getElementById('installment');
installment.innerHTML = (parseFloat(price.innerHTML) / 12).toFixed(2);
});
instead of wrapper you have to use wrapper[0] which will point to zeroth position of the span and moreover you have to change the text to float
installment.innerHTML = (parseFloat(price.innerHTML) / 12).toFixed(2);

How to replace part of the text with Javascript

I have this code:
<span class="price-measure">
23,63 € / 1 m2
</span>
Now, I want to change "/ 1 m2" with "XYTEXT" but I don't know how.
I tried to use JS code below, but it's not working.
Thank you :-)
<script type="text/javascript">
$(document).ready(function () {
var elem = $( '.price-measure span:contains("/ 1 m2 ")' );
elem.text( elem.text().replace("/ 1 m2 ", "s DPH/m2") );
});
</script>
var str1 = "23,63 € / 1 m2";
var str2 = "/ 1 m2";
if(str1.indexOf(str2) != -1){
alert("23,63 € / 1 m2".slice(0,-(str1.indexOf(str2)))+ 'XYTEXT')
}
str2 is the selected text needs to be replaced. so I just remove that section from main string and concatenate a new string.
var price = document.getElementById('price-measure').innerHTML
document.getElementById('price-measure').innerHTML= price.replace('1 m2','s DPH/m2')
i think good way use id with js not className
<br/><br/><br/><br/>
<span id="price-measure">
23,63 € / 1 m2
</span>
<span>23,63 €</span>
<span class="price-measure">/ 1 m2</span>
<script type="text/javascript">
$(document).ready(function () {
var elem = $('.price-measure');
elem.html("s DPH/m2");
});
</script>
Without changing the html content:
<span class="price-measure">
23,63 € / 1 m2
</span>
<script>
$(document).ready(function () {
var text = $('.price-measure').text().replace("/ 1 m2", "s DPH/m2");
$('.price-measure').text(text);
});
</script>
Your selector was wrong. You were asking for a span inside of .price-measure, when what you really wanted was the elements price-measure that contained your text.
For good coding practices, I also moved your hard-coded values into variables so they didn't get duplicated.
(I also removed the extra space from the end of your search query to make things more robust.)
$(document).ready(function () {
var replace="/ 1 m2";
var replaceWith = "s DPH/m2";
var elem = $('.price-measure:contains("' + replace + '")');
// Make sure we have the element.
console.log(elem);
elem.text(elem.text().replace(replace, replaceWith));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="price-measure">
23,63 € / 1 m2
</span>
I don't know how do this using jQuery, but in pure JS, you can do:
const el = document.querySelector(/* your selector */)
el.innerText = el.innerText.replace("/ 1 m2 ", "s DPH/m2")
You can try innerHTML property combined with split.
Something like this:
var first_part = $('.price-measure').innerHTML.split("/")[0];
var second_part = $('.price-measure').innerHTML.split("/")[1];
$('.price-measure').innerHTML.split("/")[0].append('XYTEXT');
$(document).ready(function(){
var t = $("span.price-measure").text().replace("/ 1 m2", "REPLACEMENT");
$("span.price-measure").text(t);
});
https://jsfiddle.net/kr09pquz/10/
If you don't need to pre-filter the elements, just iterate over them and replace their content:
$(document).ready(function() {
var elements = $('.price-measure');
elements.each(function(index, element) {
element = $(element);
element.text(element.text().replace('/ 1 m2', 's DPH/m2'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="price-measure">
23,63 € / 1 m2
</span>
If you have lots of elements and you need to pre-filter them before replacing their content, use jQuery's .filter(...) method to check, whether the specific element has the replaceable text:
$(document).ready(function() {
var replacement = '/ 1 m2';
var elements = $('.price-measure').filter(function(index, element) {
return $(element).text().indexOf(replacement) > -1;
});
elements.each(function(index, element) {
element = $(element);
element.text(element.text().replace('/ 1 m2', 's DPH/m2'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="price-measure">
23,63 € / 1 m2
</span>

How to multiply span inner by id using JavaScript?

I have a span which shows a currency.
This is my span:
<span id="v3_40"></span>
It will only show the currency when it's being loaded through a browser and it needs the script bellow to show the result:
<script src="//service.arzlive.com/p.js"></script>
It shows a currency number like this: 38,355
How can i extract this number out from this span and multiply it by another number and show it as the result in another span?
I need a code to get the numeric value out from the span
You can use innerHTML to get and set your span values.
document.getElementById('new').innerHTML = document.getElementById('v3_40').innerHTML * 12;
<span id="v3_40">38.355</span>
* 12 =
<span id="new"></span>
EDIT:
After seeing the comments to this answer, here's a more detailed approach;
var originalPrice = document.getElementById('v3_40').innerHTML;
var price = originalPrice.replace(/\,/g,'');
var newPrice = parseFloat(price,20) * 12;
newPrice = newPrice.toLocaleString();
document.getElementById('new').textContent = newPrice;
Hope that helps!

jQuery Fetching data and making sum

What i'm trying to do is taking the price of every input checked, making a sum out of it.
Here's my code
function totalSum(e) {
e.preventDefault();
var unit = $("input:checked").parent("dt").siblings("dd").find("span");
total = 0;
$.each(unit, function(index, obj){
total += parseInt($(obj).text(), 10);
});
$("#totalPrice").html('<span class="count">€ ' + total + '</span> €');
}
Every unit is found inside its span. Total is set to 0. I try to call a parseInt on each checked object, then add the total inside a span. In HTML, price is stated like that:
<dd><span class="costo">€199</span></dd>
So as you see there is the Euro mark. I am afraid it could not be parsed, is this it? Because nothing change! How should I write it?
Thanks in advance
Ok I feel so ashamed but I cannot get it to work. I decided to put the code at its minimum, so I tried that way
<body>
<div class="bla"><span class="count">1</span></div>
<div class="bla"><span class="count">1</span></div>
<div class="bla"><span class="count">1</span></div>
<div id="total"></div>
<script type="text/javascript" src="js/jquery-1.9.0.min.js" /></script>
<script>
$(document).ready(function(){
function sum() {
var prices = $("div.bla").find(".count");
total= 0;
$.each(prices, function(index, obj){
total += parseFloat($(obj).text());
});
$("#total").html('<span class="count">'+total +'</span> €');
};
});
This should work, yet nothing appear. Could someone be so kind to tell me what's going wrong?!
You can just replace any non-numeric characters:
total += parseInt($(obj).text().replace(/[^\d.-]/, ''), 10);
Also, you can do unit.each() instead of $.each(unit, but that has no effect on what you're trying to do.
You can simply remove the unit from the text :
var text = $(obj).text().replace(/[€\$]/,''); // add other units if needed
total += parseInt(text, 10); // are you sure you don't prefer parseFloat ?
Or, if you want to only keep digits and + and -, do
var text = $(obj).text().replace(/[^\d\-\+]/g, '');
Change your parseInt to skip the first character.
total += parseInt($(obj).text().substring(1),10);
After a couple of days trying and reading the best way to do it, I believe this could be an elegant solution of what I was trying to achieve :)
$("input").on("click", function() {
var j = $("input:checked");
t = 0;
$(j).each(function() {
t += parseInt(this.value, 10);
});
$("#total").html("<span>€ " + t + "</span>");
});

Overwriting <div id> with a variable in javascript

Im developing a prototype mobile web app that mimics a shopping cart. Ive been able to create the shopping cart and add products to the cart. The trouble im having is overwriting the total cost value. Im able to convert the values in order to perform the calculation but im unable to overwrite the value where the total value is stored. Here is the code ive got to far:
<div data-role="content">
<div class="ui-grid-b">
<div class="ui-block-a">Title</div>
<div class="ui-block-b">Format</div>
<div class="ui-block-c">Price</div>
<div class="ui-block-a"><p id = "myTitle"></p></div>
<div class="ui-block-b"><p id = "myFormat"></p></div>
<div class="ui-block-c"><p id = "myPrice"></p></div>
<div class="ui-block-a"></div>
<div class="ui-block-b"></div>
<div class="ui-block-c"><p id="myTotal"></p></div>
</div>
</div>
Now i wish to update the value stored in the "myTotal" id. I have a function called addtocart() and here is the code for that:
`
var total = 0;
function addtocart() {
var title = game.Title ;
var price = game.Price ;
var format = game.Format ;
var newParagraph = document.createElement('p');
newParagraph.textContent = title;
var newParagraph2 = document.createElement('p');
newParagraph2.textContent = format;
var newParagraph3 = document.createElement('p');
newParagraph3.textContent = price;
document.getElementById("myTitle").appendChild(newParagraph);
document.getElementById("myFormat").appendChild(newParagraph2);
document.getElementById("myPrice").appendChild(newParagraph3);
price = parseInt(price, 10);
price = total + price;
var newParagraph4 = document.createElement('p');
newParagraph4.textContent = total;
document.getElementById("myTotal").appendChild(newParagraph4);
}
`
Now i know the appendChild is for adding text to a document but I can seem to find a solution to overwrite the value with the new value stored in 'total' when a new item is added.
Thanks in advance :)
Use the innerHTML property. This will set the HTML inside the element to whatever you set, rather than adding a node.
var newParagraph4 = "<p>" + total + "</p>";
document.getElementById("myTotal").innerHTML = newParagraph4;
This performs less DOM manipulations and is faster than creating the paragraph on the DOM and then adding it.
Change .textContent to innerHTML:
var newParagraph4 = document.createElement('p');
newParagraph4.innerHTML = total;

Categories