Help adding event handler to collection

[bgreer5050]

Hi. I am suppose to create a variable named allSelect that references all of the select elements in my page, then for each item within the allSelect collection, I am suppose to add an onchange event handler that runs a function called loadLink().

I am getting an error:

Webpage error details

Message: 'document.forms.0.allSelect' is null or not an object
(I do not understand, because I have select elements on the page)

Here is my code for the javascript file:


window.onload = init; //We add an event handler so the init function is called upon the page loading

function init() {

var allSelect = document.getElementsByTagName("select");
alert(allSelect.length);

for (var i=0; i<allSelect.length; i++) {


document.forms[0].allSelect[i].onchange = loadLink;


}

function loadLink(){
alert("It Works");

}
}

[Sterling Isfine]

document.forms[0] does not have a property called 'allSelect'.

allSelect[i].onchange = loadLink;

[bgreer5050]

Thanks so much/

[mohdiqbal]

I am sorry but I am very new to Javascripting. can you please clarify at bit more "document.forms[0] does not have a property called 'allSelect'.

[mohdiqbal]

Thanks so much/

I need your help with this tutorial.

I am supposed to create a loadLink() function that will cause the browser to load a URL from a selection list. I also need to create a variable named sIndex that points to the index of the selected option in the current selection list. I am supposed to use the THIS keyword to reference the current selection list.

[Kor]

I am sorry but I am very new to Javascripting. can you please clarify at bit more "document.forms[0] does not have a property called 'allSelect'.

The phrase was no a happy one. It is true that the form has no property called 'allSelect', but it might have some (one or more) elements which bear the name="allSelect". In JavaScript there is no firm distinction between objects and properties, as long as any object can be treated as the property of its parentNode (if it is a HTML element) or simply a property of another object. In fact, in JavaScript everything is an object, but this is another discussion.

Now, your case: please post some code to see what is all about.

[mohdiqbal]

The phrase was no a happy one. It is true that the form has no property called 'allSelect', but it might have some (one or more) elements which bear the name="allSelect". In JavaScript there is no firm distinction between objects and properties, as long as any object can be treated as the property of its parentNode (if it is a HTML element) or simply a property of another object. In fact, in JavaScript everything is an object, but this is another discussion.

Now, your case: please post some code to see what is all about.

I have attached all the related files, I need to accomplish the following:-

I need to create init() function and need to write an event handler to run the init() function when the page is loaded. Within this init() function, I need to createa variable named allSelect that references all of the selection elements in the document.

For each item within allSelect Object collection, I need to an onchange event handler that will run the LoadLink() function when the selection list changes.

I need to create a loadLink() function that will cause the web browser to load a URL from a selection list. The following commands needs to be added to the function

1) A variable named sIndex that points to the index of the selected option in the current selection list. Its preferred to use the THIS keyword to reference the current selection.

2) Web pages can be loaded by using the command location.href = url;

[mohdiqbal]

The main goal is "select and go navigation" using javascript, that is to open the websites from the drop-down menus on selecting it.

[Kor]

<form action="">
<select onchange="if(this.selectedIndex!=0){location.href=this.value}">
<option>-- Go URL --</option>
<option value="http://www.google.com">Google</option>
<option value="http://www.yahoo.com">Yahoo</option>
</select>
</form>

[mohdiqbal]

<form action="">
<select onchange="if(this.selectedIndex!=0){location.href=this.value}">
<option>-- Go URL --</option>
<option value="http://www.google.com">Google</option>
<option value="http://www.yahoo.com">Yahoo</option>
</select>
</form>

Thank you very much Kor, I would be grateful if you could please give me the specific Javascript code for my problem. Please help

[Kor]

Thank you very much Kor, I would be grateful if you could please give me the specific Javascript code for my problem. Please help

eeer, what? That is JavaScript (included, locally in HTML). So, what more code do you want?

[mohdiqbal]

eeer, what? That is JavaScript (included, locally in HTML). So, what more code do you want?

I have attached the Files and tasks that I need to do. Also please see your private message.

Thanks in advance

[mohdiqbal]

Thanks everyone, I have decided to read a bit more and give another try. I hope to solve it myself, the only thing is that I need to read a bit more in detail.