CHAPTER 6
just created, put the text holding the country name into the element, and then position it at a specified
point on the screen.thingelem = document.getElementBy(uniqueid);
thingelem.textContent=facts[c][0];
thingelem.style.top = String(my)+"px";
thingelem.style.left = String(mx)+"px";Here, my and mx are numbers. Setting style.top and style.left requires a string, so our code converts
the numbers to strings and adds the "px" at the ends of the strings.We want to change the color of both boxes when there is a correct match. We can do this pretty much as
when changing the top and left to reposition the block. However, the name of the attribute for JavaScript
is slightly different than the one in the CSS: no dash.elementinmotion.style.backgroundColor = "gold";
this.style.backgroundColor = "gold";The gold is one of the set of established colors, including red, white, blue, etc. that can be referred to
by name. Alternatively, you can use the hexadecimal RGB values available from a program such as Corel
Paint Shop Pro, Adobe Photoshop, or Adobe Flash. For the second version of the game, I used tan and
white.Tip: You can specify a font in the style section. You can put 'safe web fonts' in any search engine
and get a list of fonts purported to be available on all browsers and all computers. However, an
alternative approach is to specify an ordered list of fonts so if the first one is not available, the
browser will attempt to find the next. See Chapter 8 for more information.Text feedback using form and input elements
The player gets feedback in two ways in the two applications: in both versions, a selected block always
gets moved. In the second version of the game, the first block clicked gets changed to tan. If the match is
correct, the color of both blocks is set to gold. Otherwise, both blocks revert to white. Text feedback is
given using input fields of a form element. This form is not used for input and so theres no button, either
as a separate button element or as an input element of type submit.The following two lines set one input field to RIGHT and the other to one more than the previous value. Note
that the value must be converted from text to number before incrementing, then converted back.document.f.out.value = "RIGHT";
document.f.score.value =String(1+Number(document.f.score.value));What if our pesky player clicks twice on the same block? We have code to check for this.if (makingmove) {
if (this==elementinmotion) {
elementinmotion.style.backgroundColor = "white";
makingmove = false;
return;
}