Section 2.13. Connecting the DOM dots | Head Rush Ajax (Head First)

2.13. Connecting the DOM dots

Let's use the DOM to get the customer's phone number. Below, we've connected the pieces of DOM code you saw on the last page, and added them to the empty getCustomerInfo() function:

     function getCustomerInfo() {     var phone = document.getElementById("phone").value;This just combines the pieces of JavaScript you saw on the last page into a single line of code.Let's store the phone number in a new variable.     }

 Go ahead and add this line of code into your version of pizza.html.     <html>      <head>       <title>Break Neck Pizza Delivery</title>       <link rel="stylesheet" type="text/css" href="breakneck.css" />       <script language="javascript" type="text/javascript">The entire HTML page     is represented by the "document" object in JavaScript.         function getCustomerInfo() {           var phone = document.getElementById("phone").value;         }       </script>      </head>      <body>       <p><img src="/books/2/850/1/html/2/breakneck-logo.gif" alt="Break Neck Pizza" /></p>       <form method="POST" action="placeOrder.php">       <p>Enter your phone number:        <input type="text" size="14"getElementById("phone")     looks for an element with an "id" attribute...              name="phone"  onChange="getCustomerInfo()" />...with a value of "phone".       </p>       <p>Your order will be delivered to:</p>       <p><textarea name="address" rows="4" cols="50" >          </textarea></p>       <p>Type your order in here:</p>       <p><textarea name="order" rows="6" cols="50" >          </textarea></p>       <p><input type="submit" value="Order Pizza" /></p>       </form>      </body>     </html>

That's it for Step 1! On to Step 2...