?
Solved

JavaScript Variable Syntax

Posted on 2011-10-26
18
Medium Priority
?
264 Views
Last Modified: 2012-06-27
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...
0
Comment
Question by:dolan2go
  • 8
  • 5
  • 4
  • +1
18 Comments
 
LVL 29

Expert Comment

by:Badotz
ID: 37034478
Try:

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

Expert Comment

by:effx
ID: 37034480
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 37034482
Instead of name="image1" use id="image1" and then

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

should work.
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 1

Author Comment

by:dolan2go
ID: 37034493
That reports in the console:
--document.getElementById("image" + b) is null
0
 
LVL 29

Expert Comment

by:Badotz
ID: 37034497
Ah, yes. There is an ID for the anchor, but not the image. My bad...
0
 
LVL 1

Author Comment

by:dolan2go
ID: 37034555
@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
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 1000 total points
ID: 37034561
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
 
LVL 1

Author Comment

by:dolan2go
ID: 37034580
@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
 
LVL 29

Expert Comment

by:Badotz
ID: 37034584
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 37034588
Hmmm... (b-1)  could fail because b is a string not a number perhaps

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

0
 
LVL 29

Expert Comment

by:Badotz
ID: 37034599
If there is no ID matching ("image" + b), then you'll get the null message.
0
 
LVL 29

Assisted Solution

by:Badotz
Badotz earned 1000 total points
ID: 37034622
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
 
LVL 1

Author Comment

by:dolan2go
ID: 37034655
@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
 
LVL 29

Expert Comment

by:Badotz
ID: 37034745
document.GetElementById is the preferred way of using the DOM. Why go backwards?
0
 
LVL 29

Expert Comment

by:Badotz
ID: 37034749
Sorry, I meant document.getElementById
0
 
LVL 1

Author Closing Comment

by:dolan2go
ID: 37034763
Thank you for quick, helpful suggestions. And for the wake-up call.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 37034785
Ever have those times where your 'think' you did something?

Almost every day ;^)  

Glad we could help a little.

0
 
LVL 29

Expert Comment

by:Badotz
ID: 37034798
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

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
Suggested Courses

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question