Quiz - The Essential Guide to HTML5 - page 198

Code Explanation

thingelem.addEventListener('click',
pickelement,false);

Set up to listen for the click event

uniqueid = "p"+String(c); Now construct the id for the capital block

d =
document.createElement('cap');

Create a new element

d.innerHTML = ( Set its innerHTML to be

"<div class='thing'
id='"+uniqueid+"'>placeholder</div>");

a div , class thing , with the id . placeholder will be
changed

document.body.appendChild(d);

Add this to the document as a child to the body element

thingelem =
document.getElementById(uniqueid);

Get a pointer to the thing element

thingelem.textContent=facts[c][1];

Set its textContent to the capital city name

do {s = Math.floor
(Math.random()*nq);}

Start a do while loop, the code in brackets is executed
at least once. Determine a random choice from empty
slots.

while (slots[s]>=0)

But repeat if this slot IS already taken

slots[s]=c; Store away the country/capital number

thingelem.style.top = String
(row1+s*rowsize)+"px";

Position this block according to formula based on which
slot and rowsize vertically

thingelem.style.left = String
(col1+inbetween)+"px";

Position this block horizontally in the second column
( inbetween over from col1 )

thingelem.addEventListener('click',
pickelement,false);

Set up to listen for the click event

my +=rowsize; Increase the my value to prepare for the next block

}

Close loop