HTML and CSS Reference
In-Depth Information
var i;
var x;
var y;
var uniqueid;
var an = alphabet.length;
for(i=0;i<an;i++) {
uniqueid = "a"+String(i);
d = document.createElement('alphabet');
d.innerHTML = (
"<div class='letters' id='"+uniqueid+"'>"+alphabet[i]+"</div>");
document.body.appendChild(d);
thingelem = document.getElementById(uniqueid);
x = alphabetx + alphabetwidth*i;
y = alphabety;
thingelem.style.top = String(y)+"px";
thingelem.style.left = String(x)+"px";
thingelem.addEventListener('click',pickelement,false);
}
The variable
i
is used for iterating over the alphabet string. The unique id is
a
concatenated with the index
value, which will go from 0 to 25. The HTML inserted into the created element is a
div
with text containing
the letter. The string is surrounded by double quotation marks, and the attributes inside this string are
surrounded by single quotation marks. The elements are spaced across the screen, starting at the
position
alphabetx
,
alphabety
(each global variable is declared earlier in the document), and
incremented horizontally by
alphabetwidth
. The
top
and
left
attributes need to be set to strings and
end with
"px"
, for pixels. The last step is to set up event handling so these elements act as buttons.
The creation of the elements for the secret word is similar. A difference is that each of these elements has
two underscores as its text content. On the screen, these two underscores look like one long underscore.
The assignment to ch (for choice) is how our program selects the secret word.
var ch = Math.floor(Math.random()* words.length);
secret = words[ch];
for (i=0;i<secret.length;i++) {
uniqueid = "s"+String(i);
d = document.createElement('secret');
d.innerHTML = (
"<div class='blanks' id='"+uniqueid+"'> __ </div>");
document.body.appendChild(d);
thingelem = document.getElementById(uniqueid);
x = secretx + secretwidth*i;
y = secrety;
thingelem.style.top = String(y)+"px";
thingelem.style.left = String(x)+"px";
}
At this point, you may be asking, how did the alphabet icons get to be letters inside blocks with borders?
The answer is that I used CSS. The usefulness of CSS goes far beyond fonts and colors. The styles
provide the look and feel of critical parts of the game. Notice that the alphabet
div
elements have a class
