Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Mar 2014
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    problem with Array of elements

    HI,
    I'm comfortable with C++, but new to javascript. What I want to do is create an array of elements and add a onclick event to them. All elements are <li> from a <ul>. each <li> has a child which is <a>. each <a> has an id of "linkID_num". With the code I have, the last onclick event is working for all elements. But all elements need their own onclick. Perhaps, I'm not understanding arrays in javascript. In C++ I would be saving an array of pointers and could access them in the individually later on. Is there something in the following code that I could change to achieve this,or is javascript saving elements to the array by value, in which case, it is not really saving an accessible element.
    tia Pete

    function onLoad()
    {
    var totalMenuItems = 5;
    var ElementsArray = new Array();
    var itemId;

    for(var i = 0; i < totalMenuItems; i++)
    {
    itemId = "itemID_" + i;
    var el = document.getElementById(itemId);

    ElementsArray.push(el);
    if(el)
    {
    var link = "linkID_" + i;
    el.onclick = function(){onclickLI(link);};
    }
    }
    }

    function onclickLI(id)
    {
    var el = document.getElementById(id);
    if(el)
    window.location.href = el.getAttribute("href");

    }

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,627
    Thanks
    0
    Thanked 647 Times in 637 Posts
    JavaScript uses save by reference for everything except primitive values such as numbers and strings.

    document.getElementById provides a live reference to the element in the HTML and so includes any changes made since the reference was created.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    New to the CF scene
    Join Date
    Mar 2014
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok that helped, thank you!!

  • #4
    Regular Coder
    Join Date
    Aug 2010
    Posts
    967
    Thanks
    19
    Thanked 211 Times in 209 Posts
    Code:
    <script>
     function onLoad() {
       var totalMenuItems = 5; 
       var ElementsArray = new Array();
       var itemId;
       for(var i = 0; i < totalMenuItems; i++) {
         itemId = "itemID_" + i;
         var el = document.getElementById(itemId);
         ElementsArray.push(el);
         if(el) {
           var link = "linkID_" + i;
           el.onclick = function(){onclickLI(link);};
         }
       }
     }
     function onclickLI(id) { 
       var el = document.getElementById(id);
       if(el) 
         window.location.href = el.getAttribute("href");
     } 
    
     </script>
    <a id=itemId_0 href="http://www.msn.com">Item0</a>
    <a id=itemId_1 href="http://www.cnn.com">Item1</a>
    <a id=itemId_2 href="http://www.fox.com">Item2</a>
    <a id=itemId_3 href="http://www.bbc1.com">Item3</a>
    <a id=itemId_4 href="http://www.yahoo.com">Item4</a>
    The above example should show that the code works as is,
    if only the last onclick event is working you will have to
    look somewhere else for your problem.
    Also note that ElementsArray is only accessible inside
    the onload function and serves no purpose in the above code.

  • #5
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,918
    Thanks
    56
    Thanked 545 Times in 542 Posts
    I've gotta say I'm struggling to see the point of any of that javascript - if clicking on an <a href=""> changes the window location by default, what is to be gained by recreating that behavior in JS?

  • #6
    New to the CF scene
    Join Date
    Mar 2014
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    I've gotta say I'm struggling to see the point of any of that javascript - if clicking on an <a href=""> changes the window location by default, what is to be gained by recreating that behavior in JS?
    There are a couple of reasons. One is the <li> are part of a menu bar that is created in php class that is used in multiple web pages. But the menu bar does not scale well on a hand held. However, the <li> elements have the information for creating a menu with <select> by using the JavaScript the menu can be updated in the php as web pages are added and the JavaScript will update the <select> menu! simplifying website additions


  •  

    Posting Permissions

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