niche Posted July 6, 2010 Share Posted July 6, 2010 I've shortend the script found at:http://www.w3schools.com/dhtml/tryit.asp?filename=trydhtml_menu10. I understand the script except the why (elmnt) is scripted. When I rename (elmnt) to (abc) it still works and I don't understand why. Doesn't (elmnt) refer to an id? If so, why doesn't it show up in one of the tags (id="tutorials" is scripted instead)?Thanks <html><head><style>body{font-family:arial;}table{font-size:80%;background:black}a{color:black;text-decoration:none;font:bold}a:hover{color:#606060}td.menu{background:lightblue}table.menu{font-size:100%;position:absolute;visibility:hidden;}</style><script type="text/javascript">function showmenu(elmnt){document.getElementById(elmnt).style.visibility="visible";}function hidemenu(elmnt){document.getElementById(elmnt).style.visibility="hidden";}</script></head><body><h3>Drop down menu</h3><table width="33%"> <tr bgcolor="#FF8080"> <td onmouseover="showmenu('tutorials')" onmouseout="hidemenu('tutorials')"> <a href="/default.asp">Tutorials</a><br /> <table class="menu" id="tutorials" width="120"> <tr><td class="menu"><a href="/html/default.asp">HTML</a></td></tr> <tr><td class="menu"><a href="/xhtml/default.asp">XHTML</a></td></tr> <tr><td class="menu"><a href="/css/default.asp">CSS</a></td></tr> <tr><td class="menu"><a href="/xml/default.asp">XML</a></td></tr> <tr><td class="menu"><a href="/xsl/default.asp">XSL</a></td></tr> </table> </td> </tr></table></body></html> Link to comment Share on other sites More sharing options...
dsonesuk Posted July 6, 2010 Share Posted July 6, 2010 its a variable, it is a reference to the value ('tutorials') that was passed to the function, on mouseover and onmouseout, you can call it what you like within reason, and as long as the variable used in getElementById(...) matches it willl work.use the alert(elmnt) and it will show "tutorials" (without quotes)function showmenu(elmnt){document.getElementById(elmnt).style.visibility="visible";}function hidemenu(elmnt){document.getElementById(elmnt).style.visibility="hidden";} Link to comment Share on other sites More sharing options...
niche Posted July 7, 2010 Author Share Posted July 7, 2010 Thanks. Except, didn't get the alert box to work by putting it into a form after the table <form><input type="button" onclick="alert(elmnt)" value="Confirmation Alert"></form> : What did I miss? Link to comment Share on other sites More sharing options...
thescientist Posted July 7, 2010 Share Posted July 7, 2010 he meant to to put it within the function. Outside the function constructor, elmnt has no context in the rest of the page. You can pass any other HTML element and its id to the function and the same actions would happen to that element. The reason why abc worked is because elmnt is just the reference to whatever is being passed to the function when it is called. Its a way to make things ambiguous so you don't have to make a function for every single element you want to have an action done to it. You make one function, pass it an id (which in the context of the function is elmnt) and presto, instant reusability. Link to comment Share on other sites More sharing options...
niche Posted July 7, 2010 Author Share Posted July 7, 2010 I know I'm being slow. But, this is what I did and it doesn't work (please check the last function in the script tag and the form tag after the table): <html><head><style>body{font-family:arial;}table{font-size:80%;background:black}a{color:black;text-decoration:none;font:bold}a:hover{color:#606060}td.menu{background:lightblue}table.menu{font-size:100%;position:absolute;visibility:hidden;}</style><script type="text/javascript">function showmenu(abc){document.getElementById(abc).style.visibility="visible";}function hidemenu(elmnt){document.getElementById(elmnt).style.visibility="hidden";}function show_alert(){alert(elmnt);}</script></head><body><h3>Drop down menu</h3><table width="33%"> <tr bgcolor="#FF8080"> <td onmouseover="showmenu('tutorials')" onmouseout="hidemenu('tutorials')"> <a href="/default.asp">Tutorials</a><br /> <table class="menu" id="tutorials" width="120"> <tr><td class="menu"><a href="/html/default.asp">HTML</a></td></tr> <tr><td class="menu"><a href="/xhtml/default.asp">XHTML</a></td></tr> <tr><td class="menu"><a href="/css/default.asp">CSS</a></td></tr> <tr><td class="menu"><a href="/xml/default.asp">XML</a></td></tr> <tr><td class="menu"><a href="/xsl/default.asp">XSL</a></td></tr> </table> </td> </tr></table><form><input type="button" onclick="show_alert(elmnt)" value="Confirmation Alert"></form></body></html> Link to comment Share on other sites More sharing options...
thescientist Posted July 7, 2010 Share Posted July 7, 2010 put it in the function...put the alert statement in the function...put the alert statement in the show or hide function.... Link to comment Share on other sites More sharing options...
niche Posted July 7, 2010 Author Share Posted July 7, 2010 A function within a function? I'm not getting it. Here's what I have in the function area: function showmenu(elmnt){document.getElementById(elmnt).style.visibility="visible";}function hidemenu(elmnt){document.getElementById(elmnt).style.visibility="hidden";}function show_alert(){alert(elmnt);} Link to comment Share on other sites More sharing options...
niche Posted July 7, 2010 Author Share Posted July 7, 2010 What a difference it makes just to get away from the screen and walk around a bit.Is this what you meant? It displays "tutorials" in the alert box: function showmenu(elmnt){document.getElementById(elmnt).style.visibility="visible";alert(elmnt);}function hidemenu(elmnt){document.getElementById(elmnt).style.visibility="hidden";alert(elmnt);} Link to comment Share on other sites More sharing options...
thescientist Posted July 7, 2010 Share Posted July 7, 2010 yes. dsonesuk was just trying to get you to see why elmnt works even though it isn't an id within the page. It was a to show you how the reference gets passed from the event handlers function call to the function itself. a function within a function is not at all uncommon, although as you found wasn't needed or necessary in this case. Link to comment Share on other sites More sharing options...
niche Posted July 7, 2010 Author Share Posted July 7, 2010 Thanks for everyone's help especially dsonesuk and thescientist. Niche Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.