Reading element attribute

[drhowarddrfine]

I'm going to have to fire my javascript guy so I guess I better start relearning all this. ;)

I wrote a little script to change the src of an image.

<script type="text/javascript">
function mine(x){
y=document.getE lementById(x);
y.src="2.png";
}

It works but I noticed that if I want to test the initial value, I have to use 'getAttribute(" src"). This does not work:

if(y.src=="2.pn g") y.src="1.png";

I don't get any errors in the Firefox error console.
if(y.getAttribu te("src")=="2.p ng") y.src="1.png";

I don't understand why I can't just say:

if(y.src=="2.pn g") y.src="1.png";

Or does it just not work that way? iow, I can set it without using getAttribute but I can't test it.

[acoder]

getAttribute() will return the full path in some browsers, so use lastIndexOf and substring to get the file name only, e.g.
[code=javascript]y.src.substring (y.src.lastInde xOf("/")+1)[/code]

[drhowarddrfine]

Aha moment. What I'm doing would work but the path name is file:///usr/home.... while I was just looking for the filename alone. Your method does what I really want to do and avoids that full pathname issue. Thanks.

What did you mean about the getAttribute method by "some browsers will return the full pathname" ?

[eihabisaac]

hey ..

an advice :

use event.srcElemen t.id;

for example

if(event.src.El ement.id == 1)
document.getEle mentById(1).src ="image.jpg" ;

[drhowarddrfine]

I'll look at that. Thank you.

[mrhoo]

IE and Opera will return the absolute url for a src or href attribute of an element, even if it is coded relatively in the html or applied with a script. Firefox doesn't- it returns the literal relative text. I don't know what safari does.

Just knowing that there are differences, makes me always convert any path string I need to compare to another to an absolute path, so I don't have to remember which does what.

Added to that, if you want your code to work on a filesystem, either on a cd or a folder on your hard drive, you have to do flips to get the different syntaxes the browsers use for local urls. And if you have a subdomain it is handy to set a temporary site root folder for all those relative urls.

This may be overkill, but maybe you can use some piece of it:

[CODE=javascript]document.getRoo t= function(rootSt r){
var L= location.href;
L= L.replace(/\\/g,'/');
var ax= rootStr? L.indexOf(rootS tr): -1;
ax= (ax== -1)? L.indexOf(locat ion.pathname)+ 1: ax+ rootStr.length;
return L.substring(0,a x);
}
document.getPat h=function(str) {
var str= str.replace(/\\/g,'/');
if(str.search(l ocation.protoco l)==0 || /^(mailto|http)\ :/i.test(str)){
return str;
}
var R=document.getR oot();
if(/^\//.test(str)) return R + str.substring(1 );

var Loc= location.href.r eplace(/\\/g,'/');
var ax= Loc.lastIndexOf ('/');
Loc= Loc.substring(0 ,ax);
var L= R.length;

while (str.search('../')==0){
if(ax<L) return '';
ax= Loc.lastIndexOf ('/');
Loc= Loc.substring(0 , ax);
str= str.substring(3 );
}
return Loc + '/' + str;
}[/CODE]

[acoder]

hey ..

an advice :

use event.srcElemen t.id;

A piece of advice, don't use event.srcElemen t!

It's an IE-only non-standard property to get the target of the event. Though not needed here, here's a cross-browser way to do get it.

[acoder]

IE and Opera will return the absolute url for a src or href attribute of an element, even if it is coded relatively in the html or applied with a script. Firefox doesn't- it returns the literal relative text. I don't know what safari does.

Just knowing that there are differences, makes me always convert any path string I need to compare to another to an absolute path, so I don't have to remember which does what.

Added to that, if you want your code to work on a filesystem, either on a cd or a folder on your hard drive, you have to do flips to get the different syntaxes the browsers use for local urls. And if you have a subdomain it is handy to set a temporary site root folder for all those relative urls.

Thanks, mrhoo. A lot more detail than I would've given.