JavaScript Variable Syntax

The core of this question is to create a hidden <tr> with changing href="" and image src="" (swapping images).
How can this function be rewritten to allow for multiple links & images in one document? More specifically, how to make image1 on line 6 variable?
function add_row (a,b) {
	// Make the row visible
	ar = document.getElementById(a);
	ar.style.display = 'table-row';
	// Change the image to up.gif (from down.gif)
	document.image1.src = "/images/up.gif";
	// Swap the href to become hide_row & set it
	var link = document.getElementById('href'+b);
	link.setAttribute("href", "javascript:hide_row('" + a + "','" + b + "')");
}

Open in new window

The document contains several of these pairs, each having href & image, plus 1, 2, 3, etc
<a href="javascript:add_row('mod_subs','1');" id="href1">
<img src="/images/down.gif" name="image1">

Open in new window

Code tried:
document.getElementById("image"+b).src = "/images/up.gif";
document.getElementById('image'+b).src = "/images/up.gif";
document.image+b.src = "/images/up.gif";
Still looking...
LVL 1
dolan2goAsked:
Who is Participating?
 
COBOLdinosaurCommented:
Okay with the name (if it is the only element with that name) you should be able to get it with:

documents.getElementsByName('image'+b).src

If there is more than one element named 'image1' it will return an array.

0
 
BadotzCommented:
Try:

document.getElementById("image" + b).src = "/images/up.gif";
0
 
effxCommented:
What about this:
function add_row (a,b) {
	// Make the row visible
	ar = document.getElementById(a);
	ar.style.display = 'table-row';
	// Change the image to up.gif (from down.gif)
	document.getElementById('image'+(b-1)).src = "/images/up.gif";
	// Swap the href to become hide_row & set it
	var link = document.getElementById('href'+b);
	link.setAttribute("href", "javascript:hide_row('" + a + "','" + b + "')");
}

Open in new window

0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
COBOLdinosaurCommented:
Instead of name="image1" use id="image1" and then

document.getElementById('image'+b).src = "/images/up.gif";

should work.
0
 
dolan2goAuthor Commented:
That reports in the console:
--document.getElementById("image" + b) is null
0
 
BadotzCommented:
Ah, yes. There is an ID for the anchor, but not the image. My bad...
0
 
dolan2goAuthor Commented:
@effx

What is the purpose of (b-1)?

@COBOLdinosaur,

Single quotes gives this in the console:
 document.getElementById("image" + b) is null

@Badotz,

We had a similar discussion 24 hours ago... Is it because of the 'type' of variable? The event:
<a href="javascript:add_row('mod_subs','1');" id="href1">
0
 
dolan2goAuthor Commented:
@COBOLdinosaur,

There is only ONE element named 'image1' (for sure, just searched the file)

@effx,

Adding the (b-1) throws this to console: -- document.getElementById("image" + (b - 1)) is null

0
 
BadotzCommented:
No - you're just appending the value of "b" to the end of a string. JavaScript casts a number to a string in this case.
0
 
COBOLdinosaurCommented:
Hmmm... (b-1)  could fail because b is a string not a number perhaps

(parseInt(b)-1) or don't use the quotes.

0
 
BadotzCommented:
If there is no ID matching ("image" + b), then you'll get the null message.
0
 
BadotzCommented:
The image must have an ID for "getElementById" to work.
//
document.getElementById("image" + b).src = "/images/up.gif";
//

Open in new window

If "b" == 1, then there must be an <img> with an ID of "image1"
//
<img id="image1"... />
//

Open in new window

0
 
dolan2goAuthor Commented:
@all,

Ever have those times where your 'think' you did something?

You all woke me up!! Thanks.

I WAS using <img src="" NAME="image1"> and it obviously worked until changing to getElementByID().

So, CAN I go back to some sort of corrected?
document.image<b>.src = ...
0
 
BadotzCommented:
document.GetElementById is the preferred way of using the DOM. Why go backwards?
0
 
BadotzCommented:
Sorry, I meant document.getElementById
0
 
dolan2goAuthor Commented:
Thank you for quick, helpful suggestions. And for the wake-up call.
0
 
COBOLdinosaurCommented:
Ever have those times where your 'think' you did something?

Almost every day ;^)  

Glad we could help a little.

0
 
BadotzCommented:
I'm always asked, "Why is it that the solution to your problem is always the last thing you try?"

No worries - glad to help.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.