
previous

page 4
next
Looking ahead
So we have all the knowledge we need to create a jigsaw but I'm planning to make one with 30 pieces so it would be sensible to use JavaScript to create the 30 lines that specify the 30 pieces. But we also need 90 lines in the CSS section and of course JavaScript can't do that - or can it?
Yes it can! Provided we go back to how we first added style. I mean like this:
<div class='piece' id='3' style='background: url(images/squares.png) -100px -100px;' onClick='piece_clicked(this);'></div>
Bit of a mouthful but if we use my usual trick to break it into pieces like this:
pieces.js
function pieces() {
var s1="<div class='piece' id='";
var s2="' style='background: url(images/squares.png) -";
var s3="px -";
var s4="px;' onclick='piece_clicked(this);'></div>";
var id=0;
var ver=0;
for (var r=0;r<2;r++) {
var hor=0;
for (var c=0;c<2;c++) {
document.write(s1+id+s2+hor+s3+ver+s4);
id++;
hor+=100;
}
ver+=100;
}
}
var s1="<div class='piece' id='";
var s2="' style='background: url(images/squares.png) -";
var s3="px -";
var s4="px;' onclick='piece_clicked(this);'></div>";
var id=0;
var ver=0;
for (var r=0;r<2;r++) {
var hor=0;
for (var c=0;c<2;c++) {
document.write(s1+id+s2+hor+s3+ver+s4);
id++;
hor+=100;
}
ver+=100;
}
}
previous
next