ADDING JUST ENOUGH JAVASCRIPT - HTML5 - page 239

input {
background - color : #FFE6BF;
}
h1 {
color : #E8A5B5;
background - color : #042B45;
text - align : center ;
}
h3 {
color : #FFC54F;
background - color : #FF0A03;
}
</ style >
< meta http - equiv = ”Content-Type” content = ”text/html; charset=UTF-8” >
< title > Simple Shopping Cart </ title >
</ head >
< body >
< header >
< h1 > Shopping Calculator </ h1 >
</ header >
< form >
< input name = cost type = number >
& nbsp ; Cost < br >
< input name = tax type = number >
& nbsp ; Tax -- Enter as decimal percent ( e . g ., .06 ) < br >
< h3 > & nbsp ; Total = $
< output onforminput = ”value = cost.valueAsNumber * tax.valueAsNumber + cost.
valueAsNumber” ></ output >
</ h3 >
</ form >
</ body >
</ html >

243

h e <form> tag has no information beyond the tag itself. For this application, it needs none.
Within the <form> container, two input forms are named cost and tax . In the context of
the DOM, each is an object with certain properties, one of which is valueAsNumber .
Whatever number character is in the input form is treated as an actual number instead of a
text character. h e valueAsNumber is a property of the <input> tag and not the number
type that was used in this example. (We could've used a text value for the input type and had
the same results using the <output> tag.) h e number input form has a “spinner” type of
input window, but values in the input window are not automatically converted into numeric
data. Figure 12-3 shows the results of the Web page in an Opera browser (the only HTML5
browser that had implemented the onFormInput event handler at the time of this writing).

Notice how the onFormInput event handler works. As information is entered into the
form, the results are calculated and displayed. Initially, the result is NaN (Not a Number)
because the tax entry is null, resulting in a non-number result. However, as soon as the
tax is entered, the output changes to a number.