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.getElementById(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.png") y.src="1.png";

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

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

if(y.src=="2.png") 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.

y.src.substring(y.src.lastIndexOf("/")+1)

[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.srcElement.id;

for example

if(event.src.Element.id == 1)
document.getElementById(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:

document.getRoot= function(rootStr){
    var L= location.href;
    L= L.replace(/\\/g,'/');
    var ax= rootStr? L.indexOf(rootStr): -1;
    ax= (ax== -1)? L.indexOf(location.pathname)+ 1: ax+ rootStr.length;
    return L.substring(0,ax);
}
document.getPath=function(str){
    var str= str.replace(/\\/g,'/');
    if(str.search(location.protocol)==0 || /^(mailto|http)\:/i.test(str)){
        return str;
    }
    var R=document.getRoot();
    if(/^\//.test(str)) return R + str.substring(1);
 
    var Loc= location.href.replace(/\\/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;
}

[acoder]

hey ..

an advice :

use event.srcElement.id;

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

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.