Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

a href name, id not defined in Firefox

Posted on 2007-04-05
12
Medium Priority
?
399 Views
Last Modified: 2013-11-19
I'm trying to dynamically, randomly rotate images with links on a page.
The following works in IE, but not in Firefox (and who knows what other browsers I haven't tested with):

<td><a href="http://www.bumpil.com" name="r1c1_link"><img src="bumpil shopit ad.jpg" alt="Bumpil shopit ad" name="r1c1" width="302" height="252" border="0" id="r1c1" /></a></td>

The Firefox error is r1c1_link is not defined

I'm just getting started with javascript, so please excuse if this a novice question.
Thanks.
0
Comment
Question by:shinnmill
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 5
12 Comments
 
LVL 28

Expert Comment

by:TName
ID: 18859007
Are you trying to access it via getElementById() using the *name* attribute? For FF it has to really be the Id, not the name, so try id="r1c1_link" instead of name="r1c1_link"...
0
 

Author Comment

by:shinnmill
ID: 18859075
actually, i was probably incorrectly doing it by just trying to set it -

r1c1_link.href = random_links[0].value;

should i be using

document.getElementById("r1c1_link") = random_links[0].value;

instead?
0
 
LVL 28

Expert Comment

by:TName
ID: 18859225

No, you cannot simply assign a link/anchor to the other one...
Why not simply assign/swap attributes? This for instance will assign the href/target and the whole content (innerHTML) of the anchor with the id "r1c1_link" to the link with the id "r1c2_link"...

document.getElementById('r1c2_link').href=document.getElementById('r1c1_link').href;  
document.getElementById('r1c2_link').innerHTML=document.getElementById('r1c1_link').innerHTML;
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 28

Expert Comment

by:TName
ID: 18859557
Here's an example of how you can swap complete links, appending them to another parent:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>    
<style>
  img {vertical-align:bottom;}
</style>  
<script>

function swap()   {  
  var first=document.getElementById('r1c1_link');
  var second=document.getElementById('r1c2_link');
  firstParent=first.parentNode;
  secondParent=second.parentNode;

  firstParent.appendChild(second);
  secondParent.appendChild(first);  
}

</script>
</head>  
<body>    
<br><br>  
<input type = "button" value="Swap" onClick="swap()">  
<br><br>
<div style="width:300px; border:1px solid #f00;">
<a href="http://www.bumpil.com" id="r1c1_link"><img src="1.gif" name="r1c1" id="r1c1" /></a>
</div>
<br><br>
<div style="width:400px; border:1px solid #444;">
<a href="http://www.google.com" id="r1c2_link"><img src="2.gif" name="r1c1" id="r1c1" /></a>
</div>
</body>
</html>

0
 

Author Comment

by:shinnmill
ID: 18859575
i hear you - just asking - why does it work in IE?
0
 
LVL 28

Accepted Solution

by:
TName earned 1000 total points
ID: 18859659
There might be a misunderstanding here. This is what you wrote:



r1c1_link.href = random_links[0].value;

should i be using

document.getElementById("r1c1_link") = random_links[0].value;

instead?


So are you trying to set the href of the object  (as in "r1c1_link.href = random_links[0].value;") or to assign
an object to another  (as in "document.getElementById("r1c1_link") = random_links[0].value;")


I saw the line
document.getElementById("r1c1_link") = random_links[0].value;
and assumed the second.



This of course will work in FF also, as long as there's an anchor with  id="r1c1_link"   :

document.getElementById('r1c1_link').href = random_links[0].value;




0
 

Author Comment

by:shinnmill
ID: 18859801
I was trying to set the href of the object  (as in "r1c1_link.href = random_links[0].value;")
where random_links[0].value holds a string of the href

It seems to be working now.  It was the not using document.getElementById().href in Firefox that was my problem.

Couple of questions:

When you say
assign an object to another  (as in "document.getElementById("r1c1_link") = random_links[0].value;")
as opposed to set the href of the object, what exactly do you mean?  Help me to understand the difference?

Also, does getElementById() use " or ' for the element id?  it seems to work with both?

Lastly, it seems to me the problem was that IE accepted the assignment of the href from the value without the getElementById.  Is this because Firefox is doing things "more by the book"?
0
 
LVL 28

Expert Comment

by:TName
ID: 18859990
>... Help me to understand the difference?

Ok. You wrote
document.getElementById("r1c1_link")  
without  .href at the end

document.getElementById("r1c1_link").href      //  this is the href (an attribute) of the anchor object
document.getElementById("r1c1_link")             // this is *the anchor object itself*


>Also, does getElementById() use " or ' for the element id?  it seems to work with both?
You can use ''   or  ""  in javascript (as long as every pair matches ;).
I'm simply used to single quotes from other languages, where double quotes would be illegal.

>IE accepted the assignment of the href from the value without the getElementById.
Indeed, it does. r1c1_link.href =...
>Is this because Firefox is doing things "more by the book"?
I would guess so, IE often tries to make things "easy" rather than consistent - at the end of the road we have quirks mode then...
0
 
LVL 28

Expert Comment

by:TName
ID: 18860004
>You can use ''   or  ""  in javascript
That's a pair of each...
To stick with your example (one of each) :
You can use '  or  "  in javascript  
:)
0
 

Author Comment

by:shinnmill
ID: 18860147
last questions:

should i always use getElementById to be uniform and safe, like in the case
 
window.document.r1c1.src = random_images[0].src;

would it be better to do

getElementById("window.document.r1c1").src = random_images[0].src;

also, do i need the window in the above example?  when do i not need it?
0
 
LVL 28

Expert Comment

by:TName
ID: 18860486
I think you'll find out that you'll use document.getElementById() very often. Yes, also in this case.
There are cases though where you won't need it, e.g. when addressing the named element of a form. In the following example, you can access the text field in several ways:

document.frm1.txt1.value='abc';
or
document.forms[0].txt1.value='abc';  
or
document.getElementById('id1').value='abc';  

<form name="frm1">
   <input type="text" name="txt1" id="id1">
...

No, you don't need "window" here, and you won't need it in most cases, as "The Document object represents the entire HTML document and can be used to access all elements in a page".  
(See  http://www.w3schools.com/htmldom/dom_obj_document.asp )

"Window" represents the browser window itself, and you will only need it if you want to access elements of the window (dimensions, scrollbars, etc) , see:  
http://www.w3schools.com/htmldom/dom_obj_window.asp
0
 

Author Comment

by:shinnmill
ID: 18860712
Thanks for the help and information TName.
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

610 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