#1
  1. No Profile Picture
    <?=php_geek(:p)?>
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2004
    Location
    Upstate NY
    Posts
    70
    Rep Power
    11

    Question JavaScript: access multiple elements with the same id?


    I have a scheduling application that outputs a Gantt chart onto a page. There are many different processes listed and some of them relate to each other. I need to associate the related processes with each other graphically somehow. What I’d like to have happen, is for the user to mouse over any item, and the related items would highlight or have the border or color change.

    What I am thinking about trying to do id give all the related elements the same id, id=”foo1” ect… then change the style for that id. The question is how? If I try to do something like getElementById() it returns a single object. How can I do it for every object with the same id? Is there a better way to do this?

    Thanks.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2002
    Location
    Pennsylvania, USA
    Posts
    129
    Rep Power
    18
    I'm no javascript expert by any means and I usually just play around til I find a solution that works for me. That said...I had cause to want something similiar to what you are asking and the following code is how I achieved it. As far as I know, it only works in IE (I didnt have to worry about other browsers). Maybe you can get some ideas from what I did.

    Code:
    <script>
    function highlight(n){
      curDivName = n.name;
      divs = document.getElementsByTagName("div");
      for (ti=0;ti<divs.length;ti++) {
        thisDiv = divs[ti];
        if(thisDiv.name == curDivName){
          thisDiv.style.color = 'red';
        }
     }
    }
    
    function unhighlight(){
      divs = document.getElementsByTagName("div");
      for (ti=0;ti<divs.length;ti++) {
        thisDiv = divs[ti];
        thisDiv.style.color = '';
     }
    }
    </script>
     
      <div name="foo1" onmouseover="highlight(this);" onmouseout="unhighlight();">one</div>
      <div name="foo2" onmouseover="highlight(this);" onmouseout="unhighlight();">two</div>
      <div name="foo3" onmouseover="highlight(this);" onmouseout="unhighlight();">three</div>
      <div name="foo3" onmouseover="highlight(this);" onmouseout="unhighlight();">three</div>
      <div name="foo1" onmouseover="highlight(this);" onmouseout="unhighlight();">one</div>
      <div name="foo4" onmouseover="highlight(this);" onmouseout="unhighlight();">four</div>
      <div name="foo3" onmouseover="highlight(this);" onmouseout="unhighlight();">three</div>
      <div name="foo1" onmouseover="highlight(this);" onmouseout="unhighlight();">one</div>
      <div name="foo2" onmouseover="highlight(this);" onmouseout="unhighlight();">two</div>
      <div name="foo2" onmouseover="highlight(this);" onmouseout="unhighlight();">two</div>
      <div name="foo3" onmouseover="highlight(this);" onmouseout="unhighlight();">three</div>
      <div name="foo4" onmouseover="highlight(this);" onmouseout="unhighlight();">four</div>
  4. #3
  5. No Profile Picture
    <?=php_geek(:p)?>
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2004
    Location
    Upstate NY
    Posts
    70
    Rep Power
    11

    Thumbs up


    awesome idea .... thanks, a little tweaking and it does exactly what I'm looking for. Awesome
  6. #4
  7. No Profile Picture
    JackOfAllTrades, MasterOfNone
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Location
    Kentucky, USA
    Posts
    398
    Rep Power
    124
    OK, I realize you got a solution working, but I wanted to point out something. You can only have one, count it, one element in an entire document with the same id. That's it. The reason what Kadina suggested works is that it uses names, not id's. Just thought I'd clarify that.

IMN logo majestic logo threadwatch logo seochat tools logo