This chapter is from the book
This chapter is from the book
This chapter is from the book
This chapter is from the book
Calling Scripts Multiple Ways
Up to this point in the book, you've seen scripts that usually run automatically when the page loads. But in the real world, you'll often want to give the user more control over your scripts, even allowing them to run a script whenever they want. In this example (Script 3.10), the script still runs when the page loads. But we also allow the user to click the link at the bottom of the page to rerun the script that generates the Bingo card entirely in their browser, without needing to reload the page from the server. This gives the user fast response with zero server load. This is the last of the Bingo card examples, wrapping up all the techniques we've used in this chapter to this point.
Script 3.10. Give your user the ability to run scripts themselves.
window.onload = initAll;
var usedNums = new Array(76);
function initAll() {
if (document.getElementById) {
document.getElementById("reload"). onclick = anotherCard;
newCard();
}
else {
alert("Sorry, your browser doesn't support this script");
}
}
function newCard() {
for (var i=0; i<24; i++) {
setSquare(i);
}
}
function setSquare(thisSquare) {
var currSquare = "square" + thisSquare;
var colPlace = new Array(0,1,2,3,4,0,1,2,3, 4,0,1,3,4,0,1,2,3,4,0,1,2,3,4);
var colBasis = colPlace[thisSquare] * 15;
var newNum;
do {
newNum = colBasis + getNewNum() + 1;
}
while (usedNums[newNum]);
usedNums[newNum] = true;
document.getElementById(currSquare). innerHTML = newNum;
}
function getNewNum() {
return Math.floor(Math.random() * 15);
}
function anotherCard() {
for (var i=1; i<usedNums.length; i++) {
usedNums[i] = false;
}
newCard();
return false;
}
To call a script multiple ways:
-
window.onload = initAll;
In previous examples, we called newCard() when onload ran. Now, we're calling a new function, initAll(), which will handle all the required initialization steps. -
function initAll() { if (document.getElementById) { document.getElementById ("reload").onclick = anotherCard; newCard(); } else { alert("Sorry, your browser doesn't support this script"); } }The initAll() function just gathers together several of the initialization steps we've previously seen, plus one new thing. If the browser is capable, all it does that's new (besides the object detection and the call to newCard()) is set the link on the HTML page (the one with the id of reload; refer back to Script 3.1) to call anotherCard() when it's clicked. The object detection was moved from newCard() to here as it's really part of the initialization routine, and that's what's handled by this function. -
function anotherCard() { for (var i=1; i<usedNums.length; i++) { usedNums[i] = false; } newCard(); return false; }Here's the anotherCard() function that's called when someone clicks the link. It does three things:- Sets all the items in the usedNums[] array to false (so that we can reuse all the numbers again),
- Calls the newCard() function (generating another card),
- Returns a value of false so that the browser won't try to load the page in the href in the link (this was covered in Chapter 2).