shinnmill
asked on
a href name, id not defined in Firefox
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.
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.
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"...
ASKER
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("r 1c1_link") = random_links[0].value;
instead?
r1c1_link.href = random_links[0].value;
should i be using
document.getElementById("r
instead?
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('r
document.getElementById('r
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.getElementB yId('r1c1_ link');
var second=document.getElement ById('r1c2 _link');
firstParent=first.parentNo de;
secondParent=second.parent Node;
firstParent.appendChild(se cond);
secondParent.appendChild(f irst);
}
</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>
<!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.getElementB
var second=document.getElement
firstParent=first.parentNo
secondParent=second.parent
firstParent.appendChild(se
secondParent.appendChild(f
}
</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>
ASKER
i hear you - just asking - why does it work in IE?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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"?
where random_links[0].value holds a string of the href
It seems to be working now. It was the not using document.getElementById().
Couple of questions:
When you say
assign an object to another (as in "document.getElementById("
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"?
>... Help me to understand the difference?
Ok. You wrote
document.getElementById("r 1c1_link")
without .href at the end
document.getElementById("r 1c1_link") .href // this is the href (an attribute) of the anchor object
document.getElementById("r 1c1_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...
Ok. You wrote
document.getElementById("r
without .href at the end
document.getElementById("r
document.getElementById("r
>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...
>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
:)
That's a pair of each...
To stick with your example (one of each) :
You can use ' or " in javascript
:)
ASKER
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.doc ument.r1c1 ").src = random_images[0].src;
also, do i need the window in the above example? when do i not need it?
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.doc
also, do i need the window in the above example? when do i not need it?
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.val ue='abc';
or
document.getElementById('i d1').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
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='
or
document.forms[0].txt1.val
or
document.getElementById('i
<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
ASKER
Thanks for the help and information TName.