Section 5.8. The DOM is connected to what a customer sees

5.8. The DOM is connected to what a customer sees

Let's take a closer look at exactly what happens when you replace an element in the DOM:

     divHere's the part of the DOM tree that we're working on.Here's the <form> we want to replace with an order confirmation.Here's what's going on in the browser as we change the DOM tree.     formWe need to replace the <form> element from the DOM tree...     p...and add the <p> in the place of the <form> element.     p     Order confirmationThis won't show up in the web browser until you've added it in to the DOM tree. 

Here's the DOM tree after you've replaced the <form> element with the new <p> element...

     divNow the <form> is nowhere to be seen. Perfect!     pAt the end of this process, here's what the DOM tree should look like.     pThe <p> with the order confirmation is now all that the customer sees.     Order confirmation 

When the <p> replaced the <form> in the DOM tree, the browser updated the web page to match.

All of this happens without page reloads... and no waiting around!

Just Do It

It's time to take everything you've been learning in these last few chapters, and put it all to work. Below is the showConfirmation() callback function for the new and improved Break Neck pizza order form. Your job is to complete the code by filling in all the blanks. You'll need to use what you know about asynchronous requests, HTML forms, the DOM, and error handling to get this function working.

 function showConfirmation() {This callback will get run once the server places the order, and responds with a delivery time.  if (request.___________ == _____) {   if (request.___________ == _____) {    var response = request.______________;    // Locate form on page    var mainDiv = document.getElementById("___________");    var orderForm = document.getElementById("___________");    // Create some confirmation text    pElement = document.______________("p");    textNode = document.______________(      "Your order should arrive within " +      __________ +      " minutes. Enjoy your pizza!");      pElement.___________(textNode);     // Replace the form with the confirmation     mainDiv.replaceChild(___________, __________);*HINT: replaceChild() takes two arguments: the first argument is the new node, and the second argument is the node to be replaced.   } else {     alert("Error! Request status is " + request._________);   }  } } 

Once you think you've got this function finished, compare your answers with ours on page 290. Then add this code to your pizza.js file, and let's take Break Neck for a test drive.