Input valueAsNumber
Every once in a while I learn about a JavaScript property that I wish I had known about years earlier -- valueAsNumber is one of them. The valueAsNumber provides the value of an input[type=number] as a Number type, instead of the traditional string representation when you get the value:
/*
Assuming an <input type="number" value="1.234" />
*/
// BAD: Get the value and convert the number
input.value // "1.234"
const numberValue = parseFloat(input.value, 10);
// GOOD: Use valueAsNumber
input.valueAsNumber // 1.234
This property allows us to avoid parseInt/parseFloat, but one gotcha with valueAsNumber is that it will return NaN if the input is empty.
Thank you to Steve Sewell for making me aware of valueAsNumber!
![Creating Scrolling Parallax Effects with CSS]()
Introduction
For quite a long time now websites with the so called "parallax" effect have been really popular.
In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...
![9 Mind-Blowing WebGL Demos]()
As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us. Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos. Another technology available...
![Prevent Page Zooming in Mobile Browsers]()
Ever since I got my iPhone, I've been more agreeable in going places that my fiancee wants to go. It's not because I have any interest in checking out women's shoes, looking at flowers, or that type of stuff -- it's because my iPhone lets...
![Morphing Elements Using MooTools and CSS]()
Morphing an element between CSS classes is another great trick the MooTools JavaScript library enables you to do. Morphing isn't the most practical use of MooTools, but it's still a trick at your disposal.
Step 1: The XHTML
The block of content that will change is...
Great tip! Is there anything wrong with parseInt / parseFloat, apart from the extra line of code? (you labeled it “BAD”)
Depending on lang, decimal separator can be comma. So,
parseFloat('0,01');will return0instead of0.01.Leaving this here hoping it saves some time I wish I had saved to some other person looking for an answer…
If you’re using this on an html input, maybe with angular… it works great, but you NEED to add the
'type="number"'to your input or it will keep giving uNaNno matter what’s in the input box.The reason ?
for some reason that I am not looking up at this time,
valueAsNumberdoes NOT work onStringtypes, but the default type of an html input isString.Bonjour,
parseFloat(string, 10)vsNumber(string)…