Live Demo đ All Demo, No Pitch: Content & Commerce / Builder.io & Elastic Path on 12/13
Use Cases
Pricing
Blog
Ă
Visual CMS
Drag-and-drop visual editor and headless CMS for any tech stack
Theme Studio for Shopify
Build and optimize your Shopify-hosted storefront, no coding required
Resources
Blog
Get StartedLoginâ°
You may have written some code like this before:
This is fine and dandy, but there is actually a better way we can be reading the number value.
Iâm talking about this part:
Thatâs right. Since all the way back in the days of IE10 weâve had a better way to get and set number values:
So a nicer solution to the above could instead look like:
And of course, you donât need React to use this. This is just standard JavaScript that works with any framework.
You could likewise query a DOM node and use it as well:
And, importantly, you can write to it as well!
The type of valuseAsNumber
will always be a number. So this means that if there is no current value set for the input, you will get NaN
as the value.
And donât forgetâŚ
Yeah, one of those little JavaScript fun parts. So be sure to check if your valueAsNumber
is NaN
before writing it to places that expect actual numbers
But wait, thereâs more!
For date inputs, we also get a handy valueAsDate
property as well:
Beautiful.
And for those who donât use React (or Qwik, which looks like React but has much better performance), you can of course do this with any plain ole HTML and JavaScript too:
And, as expected, you can write to it as well
Thankfully, for valueAsDate
, when the input is empty, we simply get null
.
So you can simply check for if the value is truthy
Yeah, this is not a new thing at all. Even if this may be your first time learning about these properties, theyâve existed for many years, even since the dinosaur days of IE 10.
Source: MDN
Now that we know how, we actually treat number and date inputs as proper number and date values, using the valueAsNumber
and valueAsDate
properties, respectively.
Builder.io is a Visual CMS that let's you drag and drop to create content on your site visually, using your components.
Stop drowning in a backlog of requests - build with your whole team instead.