Get calculated ratio value from data-attribute string - javascript

I got some aspect ratio value in a data-attribute like
<li data-ratio="4/3">4:3</li>
On a click I need to get the correct value - not the string, like I get it with this:
'click li': function(event) {
var ratio = $(event.currentTarget).attr('data-ratio');
}
I don't know if I have to change the format of the data-attribute or just do some convertion on the result - like:
var value = $(event.currentTarget).attr('data-ratio').split('/');
ratio = value[0] / value[1];

The .split() method will return an array of strings. Although JavaScript will sometimes handle the type coercion, you should still convert these strings to numbers. You can use the parseInt() function in order to retrieve the number from the string:
Example Here
$('li').on('click', function(event) {
var values = $(this).attr('data-ratio').split('/');
var ratio = parseInt(values[0], 10) / parseInt(values[1], 10);
// ...
});

I can not good understand what you are looking for, can you please check this?
$(document).ready(function(){
$('li').click(function(){
alert($(this).attr('data-ratio'))
})
})
Have a look at this fiddle and tell me what you need if this is wrong.
https://jsfiddle.net/

Related

jquery convert price from 5 decimals to round up to 2 decimals

I have a price number that looks like this: $27,272.70000
I'm trying to make it look like this: $27,272.70
I'm stuck with trying different methods but here is what i've got so far:
jQuery(document).ready(function() {
jQuery('.cart-table-wrapper #shopping-cart-table tbody > tr').each(function() {
var the_sp_subtotal = jQuery(this).find('td.col-total.a-right span.price').text().replace("$", "");
var new_sp_subtotal = parseFloat(the_sp_subtotal).toFixed(2);
console.log(new_sp_subtotal);
});
});
But the result that I get is: 27.00
Here is the fiddle - https://jsfiddle.net/zqe37xsk/1/
Can someone please help me, what I'm doing wrong?
Thank you
To format a currency string properly you could use the toLocaleString function. For this to properly work you have to transform your string into a float.
var price = '27,272.70000';
price = parseFloat(price.replace(/[$,]/g, ""));
console.log(price.toLocaleString('us-EN', {
style: 'currency',
currency: 'USD'
}));
parseFloat("27,272.70") returns 27 because the , in 27,272.70 is no longer part of a number.
As an alternative approach you could replace the part behind the last thousands separator and call toFixed on that. Then you can just join everything back together.
In your each function, use:
const [dollar, ...separatedNumber] = jQuery(this).find('td.col-total.a-right span.price').text().split(/\$|,/);
separatedNumber[separatedNumber.length - 1] = Number(separatedNumber.slice(-1)).toFixed(2);
console.log("$" + separatedNumber.join(","));

How to calculate with numbers in jquery?

I am wanting to subtract some values of inputs with the total price.
The code:
$('.calculate-resterend').click(function(e) {
e.preventDefault();
var contant = $('.checkout-contant').val();
var pin = $('.checkout-pin').val();
var creditcard = $('.checkout-creditcard').val();
var waardebon = $('.checkout-waardebon').val();
var totalprice = $('.total.final-price.price').text();
alert(contant - totalprice);
});
But this returns NaN. I figure it's because total price is .text();,
but what is the correct way to substract between these things.
Lets say var contant has a value of 2000,98
and the total price has a value of 2400,99
I want it to return 400,01.
Use Number()
alert(Number(contant) - Number(totalprice));
If you also want to remove comman(,)
alert(Number(contant.replace(/\,/g,'')) - Number(totalprice.replace(/\,/g,'')));
You may have to convert one of your values using parseInt. You can try the following:
totalprice = parseInt(totalprice)
And then proceed to do your simple subtraction like before. You could also try to make your own price attribute on the HTML element itself and the fetch the attribute value instead like .attr("price"). Not sure if that would return a string as well.
try to convert your value by using parseint()
eg:- parseint(your_value)

remove all Decimals and single numbers from array / string

so my script generates a big blob of "Piano Notes" which are similar to...
var songNotes = "...";
the large Piano notes content
and my problem is between the piano notes which i need [also in the fiddle] there are empty ",," and decimal numbers.. so i cant figure out how to remove the empty
,, and decimals as big as
"1.0416666666642413,0.625,0,g3,1498.9583333333358,,0,c3,1.0416666666642413,0.625,0,c3"
and i want them removed except the the needed words which are
var theRightOnes = "s2,as2,cs3,ds3,fs3,gs3,as3,gs3,cs4,ds4,fs4,cs3,as4,gs4,ds5,a2,cs4,b2,c3,a3,ds4,b3,c4,as3,gs2,e3,c3,c4,cs3,ds3,a4,fs3,gs3,as3,g3,f3,b4,c5,a3,d4,as2,e4,g4,d3,b3,b2,f4,a2,d4,e4,cs5,gs1,e2,c2,c3,cs2,ds2,a3,fs2,gs2,as2,g2,f2,b3,c4,a2,d3,as1,e3,g3,d2,b2,b1,f3,a1,d5,e5";
so can anyone give me a clue on how this can be accomplished?
if anyone needs more info then i am ready oblige to do so..
Regards - Adarsh Hegde
var notesArr = songNotes.split(",");
var len = notesArr.length;
while(len--) {
if(!notesArr[len] || !isNaN(parseInt(notesArr[len], 10))) {
notesArr.splice(len, 1);
}
}
songNotes = notesArr.join(",");
I think you want to remove all the numbers from notes.
You can say like bellow
var notes = songNotes.split(",").filter(function(note){
return isNaN(note);
});
console.log(notes);
You can use Array.filter (see MDN) to weed out unwanted values:
var wantedNotes = songNotes.split(',')
.filter(function (v) {
return isNaN(+v) && v.trim().length
});
jsFiddle
just use regular expression,like this:
var a = "1.0416666666642413,0.625,0,g3,1498.9583333333358,,0,c3,1.0416666666642413,0.625,0,c3";
console.log(a.replace(/\b(\d+(\.\d+)?),+/g,""));

Add strings together in jQuery

i need to get a string in jQuery to determine an integer value, then add the letters "px" to the string.
So, this is what I have:
$(function(){
var embed_height = $('.embedheight').height();
if( embed_height < 160 )
{
var imheight = embed_height-10;
var infowidth = imheight+10+"px";
$('.embedinfo').css('left','infow');
}
});
what i need is the variable infowidth to say for example 135px
currently, that jQuery function is not working
Why? jQuery will automatically cast units (px) on to an integer:
var infowidth = imheight+10;
$('.embedinfo').css('left', infowidth);
Fiddle here to play with it.

Performing mathematical operations on attribute value

I am attempting to perform mathematical operations with JavaScript on values obtained from an attribute. The attribute is created via a PHP loop. I will give an example of one of the html tags containing the attributes, but keep in mind that there are many of these tags which contain unique attribute values.
The HTML:
The JavaScript(jQuery):
$("a[href^='secondary_imgs.php']").click(function(){
var pageWidth = $(window).width();
var maxshadowWidth = (Math.floor(pageWidth * 0.91808874)) - 2;
var mWidth = $(this).attr("mwidth");
var maxSecondaryWidth = mWidth + 60;
alert (maxSecondaryWidth);
if(maxSecondaryWidth <= maxshadowWidth) {
var shadowWidth = maxSecondaryWidth;
} else {
var shadowWidth = maxshadowWidth;
}
var shadowboxrel = 'shadowbox;width=' + shadowWidth;
$(this).attr('rel', shadowboxrel);
The operation doesn't seem to be working, and I have a feeling it has to do with my lack of experience using mathematical operations in javascript. In this case, I think something is wrong with my method of using the attribute value, in the mathematical operation.
For example, the above width attribute is defined as 593. I define the maxSecondaryWidth as mWidth + 60. I fired an alert to see what value I was getting. It should have been shown as 653, yet the value that is 'alerted' is 59360. Obviously I don't understand how to add, as the + is concatenating the two values, as opposed to adding them together. Could it have to do with needing to transform the attribute value from a string into an integer?
You have to convert to a number using parseInt(), otherwise + will do string concatenation:
var mWidth = parseInt($(this).attr("mwidth"), 10);
If the attribute can also be a float, use parseFloat() instead of parseInt().
Do this to make sure mwidth is a number:
var mWidth = parseInt($(this).attr("mwidth"), 10);
Otherwise, + will perform a string concatenation. Alternatively, if you need mwidth to be a floating point number, do this:
var mWidth = parseFloat($(this).attr("mwidth"));
You can do a couple things:
parseInt(mWidth, 10); // int
parseFloat(mWidth); // float
Number(mWidth); // number
otherwise javascript will believe it's a string.
Some less common conversions:
mWidth | 0; // int (javascript bitwise operations are 32-bit signed intergers)
+mWidth; // force Number
i think that you must do something safer (as it is always better);
You should check if it is a number or not:
DOM:
JS:
$("a[mwidth]").each(function(){
var $attr = $(this).attr('mwidth');
if(!isNaN($attr)){
sum += (parseInt($attr));
}
});
If you remove the condition the results will be NaN
Take a look at : http://jsfiddle.net/zVwYB/

Categories

Resources