Using JS Variables in the DOM

**awestmoreland** · Nov 5, 2002 08:52

Apologies if this ought to be in the Javascript forum. I felt it was caught somewhere between the two:

Assuming I have a JS variable of a="myimage"
and the DOM of my page contains an element:
document.all.myimage.src

What's the syntax to programatically write:
document.all.a.src
where "a" is treated as a variable and substituted for its value?

Ad[Thanks]vance,

Andy

**awestmoreland** · Nov 6, 2002 03:34

I'm surprised that nobody knows the answer to this one.
If my original post is unclear, then I'll be happy to provide more information.

Also, if the answer is "It can't be done" then feel free to tell me, although I fee sure I've seen it done using parts of an array.

Andy

**blufive** · Nov 6, 2002 12:24

Try looking up document.getElementById().

Sorry, not time to give a full detailed example right now.

**meztec** · Nov 6, 2002 12:55

Here's an example:
Does this make sense, what your after?

<script language="javascript">

var a = "Image_Name";

document.images[a].src = "New_Image_Name"

</script>

**Bill Posters** · Nov 6, 2002 16:31

Your own example is right, though it's better that you use the W3C DOM for better x-browser compatibilty.
The DOM you're using atthe moment is IE-specific.

presuming you will be using the variable a to represent the (variable) id of an image, then the syntax is very similar to the IE DOM that you used in your example.

Here I have simply substitued id for a so the relationship is clearer...

Code:

function imgSwap(id,imgSrc) {
document.getElementById(id).src = imgSrc;
}
...

<img src="imgone.jpg" id="imgone">

...

<a href="link.hml" onmouseover="imgSwap('imgone',''imgtwo.jpg')">Link text</a>

I'm not sure how you will be stating and calling the variable, so I've shown the three basic parts of this reusable (variable-based) image handler.

Hope it's what you're after.

**awestmoreland** · Nov 7, 2002 04:06

That's great! Thanks folks for all your help.
I've learned a lot from this topic.

The code I'm writing is to reset a rollover button on mouse-out, but rather than write a separate line of code for each button, I wanted to parameterize it based on the id of the button passed to the function.

I've now successfully achieved this with your help.
Code follows:

Code:

<head>
  <script language="javascript">
  <!--

    var sections = new Array("News", "Discography", "Media", "Projects", "Biography", "Feedback", "Thanks", "Elsewhere", "Live", "Shop");
    var max_buttons = "10"

    function button_hover_off(section){
      area=sections[section]
      for (var num_button=0; num_button<max_buttons; num_button++){
        if(sections[num_button]==area){
          var selected_button="But_" + area
          document.getElementById(selected_button).src = "nav_graphics\\Up_" + area + ".png";
        }																	
      }
    }
  //-->
  </script>
</head>

<body>
  <!------------ Button #1 ---------->
  <a href=#
    onmouseover="button_hover_on(0)"
    onmouseout="button_hover_off(0)"
    onclick="button_click_on(0)">
     <img id="But_News" border="0" src="nav_graphics\\Up_News.png">
  </a>
  <br>
		
  <!------------ Button #2 ---------->
  <a href=#
   onmouseover="button_hover_on(1)"
   onmouseout="button_hover_off(1)"
   onclick="button_click_on(1)">
    <img id="But_Discography" border="0" src="nav_graphics\\Up_Discography.png">
  </a>
  <br>

....

</body>

Next thing I'm going to try is to write a for loop in the body of the page to display the buttons initially using document.write. This'll mean that I can write all ten buttons in about four lines of code therefore shrinking my code even further.

I think it'll look something like this, but my code is still buggy:

Code:

  <body>
    <script language="JavaScript">
    <!--
      for (var loop=0; loop<max_buttons; loop++){
        document.writeln("<a href=# onmouseover=\"button_hover_on(" + loop + ")\" onmouseout=\"button_hover_off(" + loop + ")\" onclick=\"button_click_on(" + loop + ")\">")
        document.writeln("<img id=\"But_" + sections[0] + " border=\"0\" src=\"nav_graphics\\Up_" + sections[loop] +".png\">")
        document.writeln("</a><br>")
      }
    //-->
    </script>
		
</body>

Thanks again for your help,

Andy

User Tag List

Thread: Using JS Variables in the DOM

Thread Tools

Display

Using JS Variables in the DOM

Bookmarks

Bookmarks

Posting Permissions