ws.generate();
getElement("eq0-label").innerHTML = ws.getEquation();
getElement("score").innerHTML = score;
};
};
Checking whether the answer was correct gave us qu ite a headache. Initially, we used
the Number() function to convert the answer f rom string to number. The score was
sometimes increased even thoug h w e entered no answer. Then we realized that an
empty string is, of course, converted to zero . So we u sed parseInt() instead.
Professor: Excellent! You did a great job. I believe that everything else is q uite
obvious and we’re ready to move on.
13.2 Using Family Relations to Manipulate Elements
Professor: Unlike the Kubla Khan poem, wh ic h was an example of a dynamic docu-
ment, the math worksheet generator is a web application. It is therefore not necessary
that we limit ou rselves to a fixed number of equations. However, to be able to p ro-
grammatica lly set the number of equations that are displayed within the worksheet,
you should know some more about the DOM manipulation methods that JavaScript
has in store for you.
Recall whe n we discussed family relations of HTML elements, and how we repre-
sented those relations in the form of a family tree. If you want, you can refresh your
memory by looking at the tree o n page 61. It will come as no surpr ise to you that
DOM objects—because they represent HTML elements—reflect exactly the same re-
lations within a tree, and you can refer to these objects in terms of relations like child
or sibling as w ell. The DOM API is in fact quite complex but you don’t need to know
much to be able to start using it to your advantage. The important thing to know is that
every HTML element is represented by an Element object, which is a subtype of the
Node class. What that mean s in practice is that you can use methods and properties of
the Node as well as those of the Element class when working with HTML elements.
You have already learned how to get hold of an HTML elemen t using the getElement
ById() method of the Document object and manipula te it using the innerHTML prop-
erty, or properties that mirror HTML attributes. You also learned that you can define
event handlers for eleme nts, and you can even insert other elements inside existing
ones dynamically by simply assigning appropr ia te HTML code to innerHTML. You
can do some pretty amazing stuff with all that already but sooner or later you’ll want
more flexibility.
While you can grab an element by its ID, this may not be very convenient if you
want to get more elements tha t logically belong together and to manipulate them all
in the same way. This is exactly what we need in our math worksheet generator as
soon as we decide to include more than one equation into the worksheet. One way
of getting several elements at the same time is fetc hing elements by their names. You
can do this with the getElem entsByTagName() method of an Element or D ocument
object. Since the Document object is the root object of DOM, invoking this method
13.2. Using Family Relations to Manipulate Elements 247
on the Document object will get y ou all the corresponding elements within the entire
document. Invoking getElementsByT agName() on an Element object, however, will
get you only the corresp onding children of that specific element.
A similar method is getElementsByClassName(),which searches elements by their
class name instead.
You can also take advantage of the family relations between ele ments and use the
firstChild or nextSibling properties of the Node class if you want to get the first
child or th e next sibling of the current N ode object, respectively. Or, you can get the
parent Node object using the parentNode p roperty.
When you work with a Node object, you must know that nodes represent not only
elements but also text between and inside them. Therefore, a Node object obtained
by firstChild or nextSibling isn’t necessarily an element but can be plain text
as well. If you are primarily interested in elements rather than text within them, then
you’ll use the corresponding properties of the Element class instead. They have sim-
ilar names with “Element” inside them like, for example, firstElementChild or
nextElementSibling. Note, however, that text cannot have children and that’s why
parentNode will always return an Ele ment ob je ct.
Mike: Pardon me, I’m not following you any longer. Can you show us some exam-
ples?
Professor: Ye s, I’m sorry. I really overdid it. Consider, for example, that we add more
equation s to our math worksheet. Like this:
<div id="ws1">
<form class="worksheet">
<div class="equations">
<div>
<label for="eq0"></label>
<input type="text" id="eq0">
</div>
<div>
<label for="eq1"></label>
<input type="text" id="eq1">
</div>
<div>
<label for="eq2"></label>
<input type="text" id="eq2">
</div>
</div>
<input type="button" value="Submit" id="submit">
</form>
<div id="score"></div>
</div>
If yo u want to get an Element object that represents the <div> element used for dis-
playing the score, you can refer to it by its ID, of course, but you can also refer to it as
the last child of the outermost <div> element:
248 Meeting 13. User Interface
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.