HTML and CSS Reference
In-Depth Information
fulness of valueAsNumber was questioned on a W3C mailing list, HTML5 editor Ian
Hickson provided a use case where the valueAsNumber property was much more con-
cise than parseFloat —incrementing the value of a field programmatically. Here's an
field . valueAsNumber += 1 ;
//HTML5 version
field . value = ( parseFloat ( field . value ) + 1 ). toString ()
//Fallback version
Step 2: Retrieve the value of quantity input fields
In the order form example, you'll use the valueAsNumber property to get the value of
the quantity fields for each product row in the Order Details section. Inside the empty for
loop from listing 2.7 , add the following code.
Listing 2.8. app.js—Getting the value of the quantity input fields
Next you'll learn how to read HTML5 data-* attribute values to get the prices for each
of the items, and then you'll implement it in the sample application.
2.3.2. Accessing values from HTML5 data-* attributes
Earlier, you learned how to bind key/value pair data to elements using the new data-*
attributes in HTML5. This information is useful when you want to add extra data to an ele-
ment that can be easily picked up and used in your JavaScript code. It's straightforward to
read data-* attributes—each element has a dataset property that contains all of the
data-* attributes for that element. Each of the items in the dataset property has a key
name that matches the key name in the element markup, with the data- prefix dropped.
In listing 2.4 you defined the item's price using the data-price attribute. To retrieve
that value, you can use the following code:
var price = element . dataset . price ;
Search WWH ::

Custom Search