Can someone please explain this script?!?

[NoAssmblyReqdGA]

Hey Everyone,

Below is script from a JavaScript tutorial book (which is very vague) that I am reading. I am still learning, but I can't figure out the logic of why this particular script works. My mind is telling me that variables (thisElement) can only hold 1 thing at time, yet this example seems to be relevant for all button elements of a form. Can someone explain.

Thanks in advance!

window.onload = initAll;

function initAll() {
for (var i=0; i<document.forms[0].elements.length; i++) {
var thisElement = document.forms[0].elements[i];
if (thisElement.type == "button") {
thisElement.onclick = saySomething;
}
}
}

function saySomething() {
switch(this.value) {
case "Lincoln":
alert("Four score and seven years ago...");
break;
case "Kennedy":
alert("Ask not what your country can do for you...");
break;
case "Nixon":
alert("I am not a crook");
break;
default:
}
}

[pentace]

Basically it is a simple increment script.

for (var i=0; i<document.forms[0].elements.length; i++) { // if variable i is less than the selected element count up.
var thisElement = document.forms[0].elements[i]; // the counted element. example if i = 3 then this is telling you the 3rd element in the page has been clicked.
if (thisElement.type == "button") { // if the element is a button input i.e. <input type=button
thisElement.onclick = saySomething; // run saySomething script



function saySomething() {
switch(this.value) { ..if element 3 is a button and its value is lincoln then case "Lincoln":
alert("Four score and seven years ago...");
break;
case "Kennedy":
alert("Ask not what your country can do for you...");
break;
case "Nixon":
alert("I am not a crook");
break;
default:
}
}

[NoAssmblyReqdGA]

Thanks for the reply, but I still don't get how the script works exactly. But I do understand what it is supposed to do. I guess my biggest question is how does the variable "this.Element" loop through all the available buttons in the form and still is able to hold a value for them all. I.E. - if the current iteration of the loop is on button 2, shouldn't the association between variable "this.Element" and the button 1 be lost. Makes sense?

Thanks.

[rpgivpgmr]

NoAssmblyReqdGA,


The document form element
for each buttons onclick attribute
is being set upon each iteration of the loop
which iterates all elements on the document.

It will contain that information until the document object (form) is destroyed.

[NoAssmblyReqdGA]

say what? lol

I'm really not a programmer...

[\\.\]

In English, it means any button found in the page will have an onclick function attached to it so when you click that button a function is called.

[Banana Ananda]

/**
* document.forms[0].elements <-- A "collection" of all the elements in the 1st form in the document
* Using a counter, we iterate through each of these elements
* (ie Loop stops when counter (i) equals the number of elements (.length)
* indexing is always zero-based, so we start at 0, and stop one before .length)
*/
for (var i=0; i<document.forms[0].elements.length; i++) {
/* Inside the loop */
// Assign the i-th element to a local variable (for efficiency & ease of use)
var thisElement = document.forms[0].elements[i];
// If the type of this element is a button
// then do the following..
if (thisElement.type == "button") {
// Every element has an "onclick" handler
// we assign it to a function, saySomething
thisElement.onclick = saySomething;

// ...This part is incomplete..



function saySomething() {
/**
* A switch structure.
* We enter into this structure at a point determined by the value held in |this.value|
* 'this' is a special keyword.
* Here it is basically the element that has been clicked
* |value| is the text on a button.
*
* All the statements below our entry point are executed until |break| is encountered,
* at which point we leave the switch.
*/
switch(this.value) {
case "Lincoln":
alert("Four score and seven years ago...");
break;
case "Kennedy":
alert("Ask not what your country can do for you...");
break;
case "Nixon":
alert("I am not a crook");
break;
default:
}
}

So, if you click on a button that says "Lincoln",
you'll get an alert box that says "Four score and seven years ago...".