We Keep Coding

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);

jQuery division - find all price classes and divide

I have a page of items with various prices in GBP, each price is within a span with a class of price, what I would like to do is change the value of ALL the prices to that value divided by 1.2. so along the lines of
$('.price').html() / "1.2";
now i'm aware that this won't work as the format is £10,500 for example, I havent been able to find similar here but i'd like to take that £10,500 value divide it by 1.2 and have the value update to the result (£8,750). Anything I have tried thus far leaves me with NaN and i'm struggling to make progress.

Add a button for testing:
<button id="test-button">Test Currencies</button>
Add the following jQuery:
$('#test-button').on('click', function () {
// Get currency elements
var currencies = $('.price');
var newSymbol = '£';
var eRate = 0.8333;
$.each(currencies, function (index, value) {
// Change value to a number using regex
var number = Number($(this).html().replace(/[^0-9\.]+/g, ""));
// Assign new value and add number formatting
$(this).html(newSymbol + (number * eRate).toFixed(2).toLocaleString('en'));
});
});
Hope it helps.

Here you go :-)
Tested and working.
$("span").each(function()
{
var strNewString = $(this).html().replace(',','');
$(this).html(strNewString / 1.2);
});

function format_price(_input_str){
var input_str=_input_str+''; //if input integer convert to string
input_str=input_str.replace(new RegExp(' ',"g"), ''); //if exist spaces
input_str=input_str.replace(new RegExp('£',"g"), ''); //if exist simbil £
input_str=input_str.replace(new RegExp(' ',"g"), ''); //if wxist
var input_int = parseInt(input_str)||0;
if(input_int==0){ return _input_str;} //return original string
input_str=input_int+'';
var out_str='';
while(input_str.length > 3){
out_str=input_str.substr(-3)+' '+out_str;
input_str=input_str.substr(0,input_str.length-3);
}
if(input_str.length>0){out_str=input_str+' '+out_str;}
out_str='£ '+out_str;
return out_str;
}
$('.price').each(function(){
var this_price=$(this).html();
$(this).html(format_price(this_price));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="price">12345</div>
<div class="price">76 09</div>
<div class="price">4576 09</div>
<div class="price">45</div>
<div class="price">£ 12 345 678 </div>

Javascript to strip html and currency symbol

I have this html:
<span class="price-amount amount"><span class="price-currencySymbol">£</span>49.99</span>
I want to extract just the value of '49.99' without the html and currency symbol.
I have tried this:
function() {
var element = document.querySelector('.price-amount');
var price = element.innerHTML.replace('£', '');
return price;
}
But the result is this:
<span class="price-currencySymbol">£</span>49.99
Rather than: 49.99

Try this
var price = element.innerHTML.match(/\d+\.\d+/)[0];
where
.match searches the pattern of price using regex.
[0] returns the first match, and in your case it would be the only match.

If you want to delete what's in the '.price-currencySymbol' span in every case, you juste have to empty its html:
document.querySelector(".price-amount").innerHTML = "";

By using selector logic and accessing the proper text node you don't even need to use regexp.
var price = document.querySelector(".price-amount")
.childNodes[1].textContent;
console.log(`Extracted price: ${price}`);
<span class="price-amount amount"><span class="price-currencySymbol">£</span>49.99</span>

Is it possible to get a value from append/html function

Html Code
<div id="price-tag"><i class="fa fa-inr"></i> <span id="price"></span></strong></div>
have a java script function that append value to a span
$("#price").html(Price);
Now I want to get the price value -
java script code
document.getElementById('price-tag').onclick = function(e){
alert(document.getElementById('price').value);
}
its returning undefined.
is there any way to get the value?

span is not an input, hence it haves no value. You should work with it's innerText as you are dealing with element's text content:
$("#price").text(Price);
var price = $("#price").text();
// Or
document.getElementById('price').innerText = Price;
var price = document.getElementById('price').innerText;

Why am I receiving a NaN on parsing an number in Javascript

I can't find why I'm receiving a NaN for printing a number out with javascript.
The following code I use is repeated elsewhere on the website and works fine.
The URL in question is: http://all-american-gold10.mybigcommerce.com/us-silver-eagles/
My code is as follows:
function setCheckPrice() {
$('.NormalPrice').each(function(key, val) {
var price = $(val).html().replace('$', '').replace(',', '');
var newPrice = parseInt(price) * .03;
var setPrice = Math.floor(price - newPrice);
var credit = '<small style="font-size: 20px !important;"> - credit card price</small>';
var check = '<p><em class="new-price">$' + setPrice +'<small style="font-size: 20px !important;"> - check price</small></em></p>';
$(val).append(credit);
$(val).prepend(check);
})
};
setCheckPrice();
My code takes a number found by a specific class name, does some math and spits in back out with some extra html to go along with it. I've tried to switch the ways I've outputted the code with append, prepend, before & after, but none seem to work? Any reason why this is acting so strange?

The price variable has additional html in it. You should consider having separate elements with a class that contains just the value that you need, and nothing else. As a quick fix, this change:
var price = $(val).val().replace('$', '').replace(',', '').replace(" ","");
get's me a value of 490 for price on that page, which is what you're looking for.