Applying a style to an onClick event

[TidalWave]

I have a horizontal navigation. When you click a navigation link that has a child menu, this menu pops out to the side and the parent link gets a background-color applied to it. If the navigation link does not have a child menu, you are taken right to the page, but the active link should still get a background-color applied to it.

However, what is happening is, when I click on a childless link, a parent link above it gets the background applied to it instead of the link that was actually clicked. This happens in both IE and FF.

The navigation functions and the onClick functions correctly. However, the style is being applied in the wrong place.

Here's the javascript:

function secondarymenuToggle(name,id) {
    var eArray = document.getElementsByTagName('DIV');
    var ele = document.getElementById(id);
 
    for (i = 0; i < eArray.length; i++)
    {
        if (eArray[i].getAttribute('name') == name)
            eArray[i].className="SecondaryMenu";        
    }
 
    if (ele != undefined)
        ele.className="SecondaryMenuActive";    
 
}
 

Here's the php where it is being put into the page:

[PHP]
$link_before = "<a href=\"".$location_var.$option_link."&cbc=1&uspid= ".$option_id."\" CLASS=\"SecondaryMenu\">";
$link_after = "</a>";
$onclick = "onclick=\"displayMenu('".$option_id."', '".$divString."');\"";
$onclick_toggle = "onclick=\"secondarymenuToggle('levelone','levelon e".$levelone_counter."');secondarymenuToggle('leve ltwo','')\"";

echo "<tr $onclick>\n";
echo "<td><div class=\"SecondaryMenu\" $onclick_toggle name=\"levelone\" id=\"levelone".$levelone_counter."\">";
echo "<div class=\"SecondaryMenu\" >".$link_before.$image_var.$link_after.$link_befor e.$option_display_value.$link_after."</div>";
[/PHP]

It seems that maybe the loop is getting mixed up somewhere? I've troubleshot this quite a bit and am not really sure what is happening. If you would like me to better explain the problem, let me know. Unfortunately it is not publicly accessible.

[acoder]

Can you post the client-side HTML code as rendered in the browser. It makes it easier to debug.

[Dormilich]

maybe I can persuade you to use a CSS driven menu....? (I didn't understand your navigation system)

regards

PS: maybe just the topic you want: "Keeping navigation current with PHP"

[TidalWave]

Can you post the client-side HTML code as rendered in the browser. It makes it easier to debug.

Sure and I was able to troubleshoot down to what the actual problem is. Here's the output:

<tr>
<td>
<div class="SecondaryMenuActive" 
onclick="secondarymenuToggle('levelone','levelone5');
secondarymenuToggle('leveltwo','')" name="levelone" id="levelone5">
<div class="SecondaryMenu">Reports</div></td>
</tr>
 
<tr>
<td>
<div class="SecondaryMenu" 
onclick="secondarymenuToggle('levelone','levelone5');
secondarymenuToggle('leveltwo','')" name="levelone" id="levelone6">
<div class="SecondaryMenu">
<a href="../charge" class="SecondaryMenu">Calls</a>
</div></td>
</tr>
 

The first link works properly and has a second menu that pops out. The second link is not working properly and is just a link.

As you can see, they both say "levelone5", which is wrong. The second one should say "levelone6". The numbers are correct up until this link. The "levelone5" is coming from a variable on the ID that simply adds one each time in the loop ($counter++).

I'm still not really sure why it gets stuck at this point.

[acoder]

I may have to move this to the PHP forum since it looks like the problem is in your PHP code.

Can you post the rest of the relevant PHP code, e.g. the loop, the counter, etc.

[TidalWave]

Can you post the rest of the relevant PHP code, e.g. the loop, the counter, etc.

I thought I did post the loop in the for statement of my javascript, no?

function secondarymenuToggle(name,id) {
           var eArray = document.getElementsByTagName('DIV');
           var ele = document.getElementById(id);
 
          for (i = 0; i < eArray.length; i++)
           {
              if (eArray[i].getAttribute('name') == name)
                  eArray[i].className="SecondaryMenu";        
          }
 
          if (ele != undefined)
             ele.className="SecondaryMenuActive";    
      }
 

PHP-wise, the only counter-related things I have are:

$levelone_counter = 1;
$levelone_counter++;
 

[acoder]

I meant the loop in the PHP code.