Question

I am making a script to make a submenu visible as a dropdown when the menu button is hovered (or onmouseover). I made the if condition refer to this.id=”menutoggle1″ and check if it’s true or false.

If true, it should fire off a function with the statement

document.getElementById("submenu1").style.display="inherit";

It doesn’t work, but I assume this has something to do with my if condition. I don’t really understand conditions that well, but I hope someone can explain why this is wrong, and maybe even help me fix it.

This is my code;

function submenu_show()
{
  if(this.id="menutoggle1" == true)
  {
    document.getElementById("submenu1").style.display="inherit";
  }
}

I know another way that I can achieve the result I want, but then I need to write two functions to show and two functions to hide, for all the menu options that are supposed to have submenus, and it is just messy and ugh.

EDIT: I figured I couldn’t make it work without dropping my idea completely, so I just went with the other alternative. I also realized that wasn’t really that messy after all, when written properly (it is supposed to be used for several drop downs after all).

Here’s the code I used eventally;

<div id="menubutton1" onmouseover="submenu1_show();" onmouseout="submenu1_hide();"></div>
<div id="submenu1" onmouseover="submenu1_show();" onmouseout="submenu1_hide();"></div>

function submenu1_show()
{document.getElementById("submenu1").style.display="inherit";}
function submenu1_hide()
{document.getElementById("submenu1").style.display="none";}

Answer 1

In the current code, this is merky. Its certainly not the element’s ID. You could find the element in the function.

function fnName(){
     var el = document.getElementById("...");
     if(el.id === "something"){ ... }
}

If you want to get the function to do this for a particular ID, you could just add a param to the fnName function and pass that param do the doc.getElByID function.