Add/Remove class onclick with JavaScript no librarys

Question

I am developing a mobile site and want to use JS for nothing more than adding and removing classes. So, in the interest of keeping things nice and light I don't want to use jQuery.

I have the following HTML:

<div id="masthead">
    <a href="index.html" title="Home" id="brand">Brand</a>

    <a href="#" id="openPrimaryNav">Menu</a>

    <ul id="primaryNav" class="">
        <li><a href="index.html" title="Home">Home</a></li>
        <li><a href="benefits.html" title="Benefits">Benefits</a></li>
        <li><a href="features.html" title="Features">Features</a></li>
        <li><a href="casestudies.html" title="Case Studies">Case Studies</a></li>
        <li><a href="instore.html" title="In Store">In-Store</a></li>
        <li><a href="contact.html" title="Contact">Contact Us</a></li>
        <li id="closePrimaryNav"><a href="#" title="Contact">Close Menu</a></li>
    </ul>
</div>

and the following JS so far:

window.onLoad = init;

function init()
{
    document.getElementById('openPrimaryNav').onClick   = openPrimaryNav();
    document.getElementById('closePrimaryNav').onClick  = closePrimaryNav();
}

function openPrimaryNav()
{
    document.getElementById('primaryNav').className = 'open';
}

function closePrimaryNav()
{
    document.getElementById('primaryNav').className = '';
}

I cannot get this working can anyone tell me what I am doing wrong? Many thanks in advance.

CORRECT JS BASED ON ANSWER PROVIDED BELOW:

window.onload = init;

function init()
{
    document.getElementById('openPrimaryNav').onclick   = openPrimaryNav;
    document.getElementById('closePrimaryNav').onclick  = closePrimaryNav;
}

function openPrimaryNav()
{
    document.getElementById('primaryNav').setAttribute('class','open');
}

function closePrimaryNav()
{
    document.getElementById('primaryNav').setAttribute('class','');
}

Solution 1

You can use setAttribute.

window.onload = init;
function init()
{
    document.getElementById('openPrimaryNav').onclick   = openPrimaryNav;
    document.getElementById('closePrimaryNav').onclick  = closePrimaryNav;
}

function openPrimaryNav()
{
    document.getElementById('primaryNav').setAttribute('class','open');
}

function closePrimaryNav()
{
    document.getElementById('primaryNav').setAttribute('class','');
}

Solution 2

It's .onclick, not .onClick

Comments

[mtwallet]

Hi and thanks for your answer I have amended my script to use your suggestion but I cannot see it working when I examine my code in Chrome Dev Tools.

[Engineer]

I have also changed openPrimaryNav() to openPrimaryNav and closePrimaryNav() to closePrimaryNav.

[Engineer]

Sorry ), onClick also must be changed to onclick .

[mtwallet]

Still nothing I have added my new JS in the edit above have I missed something?

[mtwallet]

Strange I am using modernizr on this project and when I load this script through Modernizr Load it does not work. If I attach the script in a regular manner it does?! Anyway thank you very much for the help I have the script working.