Javascript menu and box display

Question

Apparently there is an issue with my code that I can't find, because the code isn't running when I click on the menu links. What I'm creating is basically a menu that dynamically changes the content of an adjacent box, and the appearance of the menu links depending on which menu link is clicked. Here is as simplified version of my code:

HTML:

<td class="instructioncells" colspan="1" width="25%">
<a href="#" onclick="helpmenu(showid)" class="link" id="dashboardlink" style="color:      
black; text-decoration: none;">The My Marketing Dashboard</a>
<div style="height:4px;">&nbsp;</div>
<a href="#" onclick="helpmenu(showid)" class="link" id="methodlink">Selecting a    
Method</a>
</td>
<td width="75%" style="vertical-align: top;">

<div id="mymarketingdashboard" style="display: block;">
<div class="font4" style="text-align: center">
The My Marketing Dashboard
</div>
</div>

<div id="selectmethod" style="display: none;">
<div class="font4" style="text-align: center">
Selecting a Method
</div>
</div>

</td>

Javascript:

function helpmenu(showid) 
{
    var showdashboard = document.getElementById("mymarketingdashboard");
    var showmethod = document.getElementById("selectmethod");

    var mymarketing = document.getElementById("dashboardlink");
    var method = document.getElementById("methodlink");

    if (showid == "dashboardlink") 
    {
        showdashboard.style.display = "block";
        mymarketing.style.color = "black";
        mymarketing.style.textDecoration = "none";
        showmethod.style.display = "none";
        method.style.color = "#2C3A7F";
        method.style.textDecoration = "underline";
    }

    if (showid == "methodlink") 
    {
        showdashboard.style.display = "none";
        mymarketing.style.color = "#2C3A7F";
        mymarketing.style.textDecoration = "underline";
        showmethod.style.display = "block";
        method.style.color = "black";
        method.style.textDecoration = "none";
    }

Any help on finding why the code isn't running as is would be awesome. Thanks much in advance.

Answer 1

I made some changes to your code:

Javascript :

helpmenu = function (showid) 
{
    var showdashboard = document.getElementById("mymarketingdashboard");
    var showmethod = document.getElementById("selectmethod");

    var mymarketing = document.getElementById("dashboardlink");
    var method = document.getElementById("methodlink");

    if (showid == "dashboardlink") 
    {
        showdashboard.style.display = "block";
        mymarketing.style.color = "black";
        mymarketing.style.textDecoration = "none";
        showmethod.style.display = "none";
        method.style.color = "#2C3A7F";
        method.style.textDecoration = "underline";
    }
    if (showid == "methodlink") {
        showdashboard.style.display = "none";
        mymarketing.style.color = "#2C3A7F";
        mymarketing.style.textDecoration = "underline";
        showmethod.style.display = "block";
        method.style.color = "black";
        method.style.textDecoration = "none";
    }
}

Markup :

<table><tr><td class="instructioncells" colspan="1" width="25%">
<a href="#" onclick="helpmenu(this.id)" class="link" id="dashboardlink" style="color:      
black; text-decoration: none;">The My Marketing Dashboard</a>
<div style="height:4px;">&nbsp;</div>
<a href="#" onclick="helpmenu(this.id)" class="link" id="methodlink">Selecting a    
Method</a>
</td>
<td width="75%" style="vertical-align: top;">

<div id="mymarketingdashboard" style="display: block;">
<div class="font4" style="text-align: center">
The My Marketing Dashboard
</div>
</div>

<div id="selectmethod" style="display: none;">
<div class="font4" style="text-align: center">
Selecting a Method
</div>
</div>

    </td></tr></table>

jsFiddle : http://jsfiddle.net/UxQD9/1/

I simply pass the id of the clicked anchor to the helpmenu function.