HTML5 Tracker

Short URL: http://html5.org/r/3791

Index: source
===================================================================
--- source	(revision 3790)
+++ source	(revision 3791)
@@ -13155,9 +13155,50 @@
   title="dom-outerHTML">outerHTML</code> attributes, they do not
   execute at all.</p>
 
+  <div class="example">
 
+   <p>The following sample shows how a script element can be used to
+   define a function that is then used by other parts of the
+   document. It also shows how a <code>script</code> element can be
+   used to invoke script while the document is being parsed, in this
+   case to initialize the form's output.</p>
 
+   <pre>&lt;script>
+ function calculate(form) {
+   var price = 52000;
+   if (form.elements.brakes.checked)
+     price += 1000;
+   if (form.elements.radio.checked)
+     price += 2500;
+   if (form.elements.turbo.checked)
+     price += 5000;
+   if (form.elements.sticker.checked)
+     price += 250;
+   form.elements.result.value = price;
+ }
+&lt;/script>
+&lt;form name="pricecalc" onsubmit="return false">
+ &lt;fieldset>
+  &lt;legend>Work out the price of your car&lt;/legend>
+  &lt;p>Base cost: &pound;52000.&lt;/p>
+  &lt;p>Select additional options:&lt;/p>
+  &lt;ul>
+   &lt;li>&lt;label>&lt;input type=checkbox name=brakes> Ceramic brakes (&pound;1000)&lt;/label>&lt;/li>
+   &lt;li>&lt;label>&lt;input type=checkbox name=radio> Satellite radio (&pound;2500)&lt;/label>&lt;/li>
+   &lt;li>&lt;label>&lt;input type=checkbox name=turbo> Turbo charger (&pound;5000)&lt;/label>&lt;/li>
+   &lt;li>&lt;label>&lt;input type=checkbox name=sticker> "XZ" sticker (&pound;250)&lt;/label>&lt;/li>
+  &lt;/ul>
+  &lt;p>Total: &pound;&lt;output name=result onformchange="calculate(form)">&lt;/output>&lt;/p>
+ &lt;/fieldset>
+ &lt;script>
+  document.forms.pricecalc.dispatchFormChange();
+ &lt;/script>
+&lt;/form></pre>
 
+  </div>
+
+
+
   <h5 id="scriptingLanguages">Scripting languages</h5>
 
   <div class="impl">

Previous | Next