Section 3.17. Getting and setting the text content in a div

3.17. Getting and setting the text content in a <div>

Let's get back to orderCoffee(). We need to get the status of the first coffee maker from the "coffeemaker1-status" <div> element, and then if the status is "Idle", send a request to brew coffee using this coffee maker. If the first coffee maker is busy, we should check the second coffee maker, and the "coffeemaker2-status" <div>.

On top of all that, you'll need to change the status of whichever coffee maker you use to indicate that it's busy brewing an order. To get or set the text content in a <div>, you need to use the browser's Document Object Model, or DOM for short. We're going to go into how to use the DOM in a lot more detail in the next chapter, so for now, just follow along using the so we can finish the coffee maker application.

What you want: to get the text in the "coffeemaker1-status" <div>

 <div > <h2>Coffee Maker #1</h2> <p><img src="/books/2/850/1/html/2/images/CoffeeMaker1.gif" alt="Coffee Maker #1" /></p> <div >Idle</div>To read the status, you need to get the content of the "coffeemaker1-status" <div>. </div>

We'll need to be able to do the same thing for the second coffee maker, using the "coffeemaker2-status" <div>.

More help from text-utils.js

Remember, is code that's ready for you to use. Just type it in and we'll explain it all later-promise!

In Chapter 1, you used the text-utils.js JavaScript file to help you update Katie's web report. We're going to use the same JavaScript utility file in the coffee maker. Start out by adding another <script> element into the head of your coffee.html file referring to text-utils.js, like this:

 <html> <head> <title>Ajax-powered Coffee Maker</title> <link rel="stylesheet" type="text/css" href="coffee.css" /> <script type="text/javascript" src="/books/2/850/1/html/2/ajax.js"> </script> <script type="text/javascript" src="/books/2/850/1/html/2/text-utils.js"> </script> <script type="text/javascript" src="/books/2/850/1/html/2/coffee.js"> </script> </head> Add this line, and then you can use all the utility functions from text-utils.js in your JavaScript functions.