2

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','');
}
1

2 Answers 2

7

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','');
}
5
  • 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.
    – mtwallet
    Mar 18, 2012 at 10:59
  • I have also changed openPrimaryNav() to openPrimaryNav and closePrimaryNav() to closePrimaryNav.
    – Engineer
    Mar 18, 2012 at 11:00
  • Sorry ), onClick also must be changed to onclick .
    – Engineer
    Mar 18, 2012 at 11:04
  • Still nothing I have added my new JS in the edit above have I missed something?
    – mtwallet
    Mar 18, 2012 at 11:07
  • 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.
    – mtwallet
    Mar 18, 2012 at 11:17
1

It's .onclick, not .onClick

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.