Unable to set visibility: hidden via JavaScript


I'm having a bit of trouble getting my head around this thing so I thought it might help to post it here. So here it goes.

What I have: 5 different images in 5 different table cells + a script that I will post below.

What I want: to use the javascript's...

document.GetElementById("image ID").style.visibility='visible/hidden'

...after a preset time, but, instead of image ID there is a string that gets the ID of the image, and before anyone says anything, I am not using "" for the string that is inside of (). Something like...

var n=1;
function picID() {

...and this way, every time that function is called we get the element ID of "pic1", "pic2", "pic3", etc.

What my problem is: the darn thing won't work. The image styling remains the same as I defined it in the img tag. (style="visibility:hidden")

All image ID's are within the img tag, as it should.

Here's the whole code:

var m=1;
        function Show() {
        if (m==6) {m=1;}

    setTimeout('Show()', 3000);
window.onload = Show;

var k=1;
    function Hide() {
    if (k==6) {k=1;}

    setTimeout('Hide()', 3000);

window.onload = Hide;

I've separated the code so it'd easier to spot. From what I've seen the only issue is the bold line within the code. I've tested everything else by replacing the document.getElementById with document.write, so I can see that the custom ID string thingy is working fine. It is. An everything else as well.

Any suggestions? Thanks.

Try setting k = 0; instead of k = 1;

It looks like when you load the page you have both the show() and the hide() functions running on the same element. Doing the above will make hide() run on the element BEFORE the element the show() runs on.