HTML and CSS Reference
In-Depth Information
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;
}
