www.webdeveloper.com
Results 1 to 13 of 13

Thread: Help adding event handler to collection

  1. #1
    Join Date
    Jan 2010
    Posts
    12

    Help adding event handler to collection

    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");

    }
    }

  2. #2
    Join Date
    Jun 2007
    Posts
    667
    document.forms[0] does not have a property called 'allSelect'.

    Code:
    allSelect[i].onchange = loadLink;

  3. #3
    Join Date
    Jan 2010
    Posts
    12
    Thanks so much/

  4. #4
    Join Date
    Sep 2010
    Posts
    7
    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'.

  5. #5
    Join Date
    Sep 2010
    Posts
    7
    Quote Originally Posted by bgreer5050 View Post
    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.

  6. #6
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by mohdiqbal View Post
    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.

  7. #7
    Join Date
    Sep 2010
    Posts
    7
    Quote Originally Posted by Kor View Post
    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;
    Last edited by mohdiqbal; 09-16-2010 at 10:21 AM.

  8. #8
    Join Date
    Sep 2010
    Posts
    7
    The main goal is "select and go navigation" using javascript, that is to open the websites from the drop-down menus on selecting it.

  9. #9
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Code:
    <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>

  10. #10
    Join Date
    Sep 2010
    Posts
    7
    Quote Originally Posted by Kor View Post
    Code:
    <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

  11. #11
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by mohdiqbal View Post
    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?

  12. #12
    Join Date
    Sep 2010
    Posts
    7
    Quote Originally Posted by Kor View Post
    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
    Last edited by mohdiqbal; 09-16-2010 at 10:21 AM.

  13. #13
    Join Date
    Sep 2010
    Posts
    7
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles