Simple Javascript questions

[srg_13]

Hi,

I have run into a few problems with Javascript that I can't work out, and no amount of googling has found the answer.

The first: How can I get a script to run a function after an image is loaded? I tried image.onload = function(), but this didn't work in Iternet Explorer.

Second: I have a variable that contains an "html collection". How can I convert this into a normal string?

Thanks,

-Stephen

[edit]The only reason that Javascript is in two words is because the message board software is separating it...[/edit]

[Kemp]

Perhaps writing it as Javascript will help you (the second capital isn't part of the name as far as I know). Not having used javascript for quite a long time I can't help you too much, but the onload attribute for the img tag should be settable to an appropriate function (make sure the name and etc is in quotes though).


Edit:
Eek, you're right. I guess that's to stop people embedding code in their posts or something.

[YeXo]

When trying image.onload, I assume you were using IDofImage.onload? You could try to add the attribute name with the same content as id.

Edit: I just thought, shouldn't you use the document.getElementById function, you could use it this way (assuming the id of you img is "testid"):

Code: Select all

document.getElementById('testid').onload = somefunction;

[mystran]

Btw, is it specified somewhere what happens if the browser happens to execute the code to set the onload handler after the image has been loaded already?

Can it happen that the old (null?) onload handler for the image is called, and only then the new handler installed, which will never be called, because the image is already loaded?

[YeXo]

I've never read anything about that. Why dont you check it? Make a function func1 which is called by body.onload, let that function call func2 with a delay of 5 seconds, and let func2 set the image.onload attribute. See what happens.

Btw, I've looked in the msdn library but couldn't find anything about the image been earlier loaded.

[srg_13]

I am using the ID of the image. Here's an example:

Code: Select all

var main_image = document.getElementById('main_image');

main_image.className = 'hidden';
main_image.src = src;
main_image.onload = showimage();

Should the onload function work here? Currently it just runs showimage() without waiting for the image to complete loading.

Does anyone know how to do the html collection? I want to print a variable that is currently an html collection, and currently it just prints [htmlcollection].

Thanks,

-Stephen

[edit]I fixed the variable name in the code[/edit]

[YeXo]

Shouldn't you use image.className etc. Like this:

Code: Select all

var image = document.getElementById('main_image');

image.className = 'hidden';
image.src = src;
image.onload = showimage();

The MSDN Library says this about it at the event of onload:

onload - Fires immediately after the browser loads the object.

But on the evend onload it says:

Remarks

The browser loads applications, embedded objects, and images as soon as it encounters the applet, embed, and img objects during parsing. Consequently, the onload event for these objects occurs before the browser parses any subsequent objects.

I don't know of any other ways to invoke a function when the image is loaded.

What method do you use to get that html collection?

[srg_13]

OK... I think that you can use the if(image_object.complete) or something to see if an image is loaded. But if I use a while(!image_object.complete) then the browser looses functionability until the image is loaded... Are there any other ways to check other than a loop? maybe at 5 second intervals or something...

Now I am getting an object Element by using the getElementsbyTagName function. I was getting a html collection before, but I've tried another way. I'll see if I can figure out how to convert this.

-Stephen

[YeXo]

You can check if the image is loaded using this code:

Code: Select all

var image = getElementById('image_id');
function imageLoaded(){
    if( image.complete ){
        //Do what you want to do when the image is loaded here
    }
    else{
        setTimeout("imageLoaded()",500);
    }
}//end function imageLoaded
image.onLoad = imageLoaded();
}

This checks whether the image is loaded or not, if not, the function is called again half a second later.

[srg_13]

OK, I fixed that!

As for the object element thing, I'm pretty sure I'm doing that the wrong way. How can I select the innerHTML of an element that I select from a tag name?

I am doing an AJAX thing and I need to select the text inside a tag...

-Stephen

[YeXo]

document.getElementByName('elementName').innerHTML = "you own new inner html here!";

[mystran]

Totally unrelated, but somehow I remembered this piece of javascript i wrote a week or so ago, to test something.

Try making a bookmark in your browser with the following javascript url:

Code: Select all

java$cript:void(document.body.innerHTML = document.body.innerHTML.replace(
/([> \n][^ <>=\/]*)([\124\164])([\110\150])([\105\145])([^ <>=\/]*[> \n])/gm,
"$1$2$4$3$5"));

Obviously, substitute 's' for the first '$' (in the protocol name), and put it all on one line.

This is tested to work on Firefox and IE at least, although my IE complains about "unregistered protocol name" when I enter the url in bookmark's properties, but if you "keep it anyway" it works.

Now, visit any page with (preferably) english content, and try selecting the bookmark. Have fun.

edit: If it wasn't clear for someone, you need to put that code into the bookmark's location field. You can also type it interactively in the normal address field every time you want to use it.. but..

[srg_13]

Code: Select all

[quote="YeXo"]
document.getElementByName('elementName').innerHTML = "you own new inner html here!";
[/quote]

This doesn't work... Here is some of my code:
[code   ]response = req.responseXML.documentElement;
      
   method =  response.getElementsByTagName('method')[0].firstChild.data;
         
   result = response.getElementByName("result").innerHTML;
         
               
   eval(method + '(\'\', result)');

FF says that "response.getElementByName is not a function" in the javascript console...

-Stephen