Im trying to create a script that has its own built in event handlers, so that I can keep the HTML separate from the behaviour.

I have to <a> tags, with separate id's, but I keep getting the 'has no properties' error message?

Here is my code!

// hide graphic thumbnails
function hideGraphic (portThumbGraphic)
    {
        var portThumbGraphic = document.getElementById ('portThumbGraphic');
        portThumbGraphic.style.display = 'none';
    }

// hide website thumbnails
function hideWebsite (portThumbWebsite)
    {
        var portThumbWebsite = document.getElementById ('portThumbWebsite');
        portThumbWebsite.style.display = 'none';
    }

// hide graphic thumbnails by default
window.onload = hideGraphic;

var btnThumbWebsite = document.getElementById ('btnThumbWebsite');
var btnThumbGraphic = document.getElementById ('btnThumbGraphic');

// set functions to nav list
btnThumbWebsite.onclick = hideGraphic;
btnThumbGraphic.onclick = hideWebsite;

Any ideas? Thanks to anyone who can help.

You need to set your events, and set the variables btnThumbWebsite, and btnThumbGraphic inside of a function initiated by the onload event. The reason that you are getting this error is that when you attempt to use getElementById, the elements are not available yet. By waiting for them to load, you will avoid this problem.

The other solution is to place the scripts down at the bottom, right before your closing </body> tag. This will insure that all of the HTML is loaded before the script is run. The upside of this method is that the DOM is available, but you don't need to wait for images to load, unlike the onload event. Be aware, however, that scripts run in this fashion do not wait for images to be ready before they run, which will be important if you ever need to do something to images.

Thanks a lot.

My code now reads like so:

function hideGraphic (portThumbGraphic)
    {
        var portThumbGraphic = document.getElementById ('portThumbGraphic');
        var portThumbWebsite = document.getElementById ('portThumbWebsite');
        portThumbGraphic.style.display = 'none';
        portThumbWebsite.style.display = 'block';
    }

// hide website thumbnails
function hideWebsite (portThumbWebsite)
    {
        var portThumbWebsite = document.getElementById ('portThumbWebsite');
        var portThumbGraphic = document.getElementById ('portThumbGraphic');
        portThumbWebsite.style.display = 'none';
        portThumbGraphic.style.display = 'block';
}

function pageLoad ()
    {
        var btnThumbWebsite = document.getElementById ('btnThumbWebsite');
        var btnThumbGraphic = document.getElementById ('btnThumbGraphic');
        
        // set functions to nav list
        btnThumbWebsite.onclick = hideGraphic;
        btnThumbGraphic.onclick = hideWebsite;
        
        // hide graphic thumbnails by default
        hideGraphic ();
    }

window.onload = pageLoad;

But Im wondering, is there anyway to stop the page from refreshing after clickin on the <a> tag?

Ive had to change the anchor tags to <span> to prevent this, but I dont like the way the text cursor appears as it stops the buttons from looking 'clickable'.

Never mind, I used CSS to sort it out, didnt expect it to be that easy

You can have the href in the anchor tags be anything you want, and as long as the function that handles your click event returns false, it won't be followed, thus no refresh.

I see! So does 'return false' basically just stop something being submitted / refreshed? I thought it meant all sorts of things, lol

Correct. It would also, for example, stop the page from jumping to a named anchor, or prevent a form from being submitted.

It also returns a value (false), which is reflected in any variable that is assigned the value of the function.

I get ya, thanks

Ive had to change the anchor tags to <span> to prevent this, but I dont like the way the text cursor appears as it stops the buttons from looking 'clickable'.

To any future readers;

the CSS rule to stop this is;

cursor:pointer;