3.19. Setting the text in a <div> Now that you know how to get the text in the coffee maker status <div>s, you just need to be able to set the text in those status <div>s. You can use another utility function in text-utils.jsfor this, called replaceText(). function orderCoffee() { var name = document.getElementById("name").value; var beverage = getBeverage(); var size = getSize(); var coffeemakerStatusDiv1 = document.getElementById("coffeemaker1-status"); var status = getText(coffeemakerStatusDiv1); if (status == "Idle") { replaceText(coffeemakerStatusDiv1, "Brewing " + name + "'s " + size + " " + beverage);If the first coffee maker is idle, this will update the coffee maker's status to indicate that it's making a drink... ...and these send the request to the coffee-making PHP script. var url = "coffeemaker.php?name=" + escape(name) + "&size=" + escape(size) + "&beverage=" + escape(beverage) + "&coffeemaker=1"; sendRequest(url); } } getText() will return the text within a <div>, or any other element that you give it. getText() replaceText() reaplaceText() takes an element, and the text to put within that element. This will clear out any existing text, so that the text you supply becomes the only text in the element.
JavaScript ...at a glance Let's take a brief look at text-utils.js. Remember, all of this code will make a lot more sense once you've gone through Chapter 4. We haven't covered the DOM yet, so just get a general idea of what the JavaScript in text-utils.js does. We'll cover the DOM in detail in the next chapter. function replaceText(el, text) { replaceText() is a general purpose function that takes an element object, like a <div>, and a string of text, and sets the element's content to the text that you pass in. if (el != null) { clearText(el); var newNode = document.createTextNode(text); el.appendChild(newNode); } } replaceText() uses clearText() to clear out an element's contents, and then replaceText() sets the element's new text content. function clearText(el) { if (el != null) { if (el.childNodes) { for (var i = 0; i < el.childNodes.length; i++) { var childNode = el.childNodes[i]; el.removeChild(childNode); Watch out! clearText() will clear out any content in an element, including nested elements, as well as text. } } } } getText() will return the text content of the element you give to it. function getText(el) { var text = ""; if (el != null) { if (el.childNodes) { for (var i = 0; i < el.childNodes.length; i++) { var childNode = el.childNodes[i]; if (childNode.nodeValue != null) { text = text + childNode.nodeValue; getText() will take all the text in an element, and combine it into a single string, which is what the function returns. } } } } return text; }
REMEMBER: It's OK if you don't understand this code. We're going to spend a lot of time on the DOM in the next chapter. |
Code Magnets With the help of text-utils.js, sendCoffee() figures out if the first coffee maker is idle, and if it is, uses that coffee maker to brew an order. But what happens if the first coffee maker isn't idle? In that case, your JavaScript needs to see if the second coffee maker is idle, and if it is, use that coffee maker to brew the order. Otherwise, you'll need to let the user know that they'll have to wait for one of the busy coffee makers to finish before their order can be brewed. Below is the code for sendCoffee(), with several blanks. Your job is to set up the JavaScript to try and use both coffee makers. Place the correct magnets in each blank, and then turn the page: function orderCoffee() { var name = document.getElementById("name").value; var beverage = getBeverage(); var size = getSize(); var coffeemakerStatusDiv1 = document.getElementById("coffeemaker1-status"); var status = getText(coffeemakerStatusDiv1); if (status == "Idle") { replaceText(coffeemakerStatusDiv1, "Brewing " + name + "'s " + size + " " + beverage); var url = "coffeemaker.php?name=" + escape(name) + "&size=" + escape(size) + "&beverage=" + escape(beverage) + "&coffeemaker=1"; sendRequest(url); } else { The "else" part of this code will run when the first coffee maker's status is not "Idle". All the code on the facing page is part of the "else" block.
If you're not sure which magnets to use where, look back at the JavaScript that controls the first coffee maker. The JavaScript for the second coffee maker should look very similar. var ____________________ = document.getElementById("________________"); status = getText(_______________); if (status == "_________") { replaceText(_____________________, "Brewing " + _______ + "'s " + _______ + " " + ____________); var url = "_______________?__________=" + escape(________) + "&__________=" + escape(________) + "&__________=" + escape(________) + "&__________=___"; _______________(url); } else { ________("Sorry! Both coffee makers are busy. " + "Try again later."); } } } You can use a magnet more than once if you need to. coffeemakerStatusDiv2 coffeemakerStatusDiv alert coffeemaker.php coffeemaker2-status coffeemaker beverage name alert size 2 coffeemakerStatusDiv sendRequest coffeemaker1-status 1 Idle
|
Code Magnets: Solutions Below is the portion of orderCoffee() that you should have finished off. Be sure your answers match ours, and save your copy of coffee.js with these changes. All this code is in the orderCoffee() function. if (status == "Idle") { ... } else { This code runs when the first coffee maker is already brewing coffee for someone else. var coffeemakerStatusDiv2 = document.getElementById("coffeemaker2-status"); status = getText(coffeemakerStatusDiv2); if (status == "Idle") { replaceText(coffeemakerStatusDiv2, "Brewing " + name + "'s " + Size + " " + beverage); var url = "coffeemaker.php?name=" + escape(name)+ "&size=" + escape(size)+ "&beverage=" + escape(beverage)+ "&coffeemaker=2"; Be sure to use the second coffee maker here! sendRequest(url); } else { alert("Sorry! Both coffee makers are busy. " + "Try again later."); This lets users know when both coffee makers are already busy. } } } These magnets are all left over. coffeemakerStatusDiv alert 1 coffeemaker1-status coffeemakerStatusDiv
|
|
