Head Rush Ajax

166

Getting and setting the text content in a <div>

Let’s get back to orderCoffee(). We need to get the status of the rst 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 rst 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 nish the coffee maker application.

<div id=”coffeemaker1”>

<h2>Coffee Maker #1</h2>

<p><img src=”images/CoffeeMaker1.gif”

alt=”Coffee Maker #1” /></p>

<div id=”coffeemaker1-status”>Idle</div>

</div>

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

More help from text-utils.js

To read the status, you need to get the

content of the “coffeemaker1-status” <div>.

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 le to help you update

Katie’s web report. We’re going to use the same JavaScript utility le in the

coffee ...