Forum Moderators: open
I am trying to use the getelementbyid method of the document object to get an object by its id, but somehow this is not working. I have seen other people use it, but somehow it's not working with me. It would be really helpfull if someone can help me with this!
Here is my code:
<html>
<head>
<script language="javascript" type="text/javascript">
alert(document.getelementbyid("leftmenu").tagName);
</script>
</head>
<body>
<div id="leftmenu"> Text on the page </div>
</body>
</html>
It's very simple but maybe I am doing something wrong.
Thanks,
Sunny
You are trying to gain a reference to an element that doesn't yet exist.
(the HTML for it is further down in the code).
1) Put your <script> block below the element you're after
or
2) Trigger the command with the onload event
window.onload = function()
{
alert(document.getelementbyid("leftmenu").tagName);
}
Welcome to browser scripting!
Thanks for your quick response, but it doesn't work even if I place it below the code. Could you please test the code that I gave :) Thanks,
Sunny
window.onload = function()
{
alert(document.getElementById("leftmenu").tagName);
}
Note the use of uppercase in:
document.getElementById("leftmenu")
Sunny
I didn't stop to check the capitalisation!
HTML--------------------
<div ID="leftmenu">
<ul ID="Menu">
<li class="Main"><a style="border-top:none;" href="#" class="mlinks">Main Link One </a></li>
<li class="Main"><a href="#" onclick="togSub(this); return false;" class="mlinks">Main Link Two</a>
<ul class="Item">
<li><a href="/directoryOne/something.html" class="slinks">SubMenu Option One</a></li>
<li><a href="/directoryOne/something2.html" class="slinks">SubMenu Option Two</a></li>
<li><a href="/directoryOne/something3.html" class="slinks">SubMenu Option Three</a></li>
<li><a href="/directoryOne/aomething4.html" class="slinks">SubMenu Option Four</a></li>
<li><a href="/directoryOne/something5.html" class="slinks">SubMenu Option Five</a></li>
</ul>
</li>
<li class="Main"><a href="#" class="mlinks">Main Link Three</a></li>
<li class="Main"><a href="#" onclick="togSub(this); return false;" class="mlinks">Main Link Four</a>
<ul class="Item">
<li><a href="#" class="slinks">SubMenu Option One</a></li>
<li><a href="#" class="slinks">SubMenu Option Two</a></li>
<li><a href="#" class="slinks">SubMenu Option Three</a></li>
</ul>
</li>
<li class="Main"><a href="#" onclick="togSub(this); return false;" class="mlinks">Main Link Five</a>
<ul class="Item">
<li><a href="#" class="slinks">SubMenu Option One</a></li>
<li><a href="#" class="slinks">SubMenu Option Two</a></li>
<li><a href="#" class="slinks">SubMenu Option Three</a></li>
</ul>
</li>
</ul>
</div>
CSS--------------------------------------------------
<style type="text/css">
#leftmenu{
width:132px;
margin:0;
background-image: url(/images/sdc-dsc/intracom/left_menu2.gif);
border-right: 2.0px outset #A7BFD7;
border-bottom: 2.0px outset #A7BFD7;
border-left: 1.0px outset #A7BFD7;
border-top: 1.0px outset #A7BFD7;
background-repeat:repeat-y;
background-color:#ADC4DB;
}
li.Main ul {
display: none;
}
li.Main{
list-style-type:none;
list-style-image:none;
}
ul.Item{
list-style-type:none;
border-style:groove;
border-width:1px;
border-right:none;
border-left:none;
border-color:#330066;
background-color:#FAFAFA;
margin-left:0;
}
a.mlinks:link,a.mlinks:visited{
font-size :80%;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color: #FFFFFF;
text-decoration:none;
width:100%;height:100%;
cursor:pointer;
display:block;
padding-left:.5em;
padding-top:.2em;
padding-bottom:.2em;
border-style:solid;
border-width:1px;
border-right:none;
border-bottom:none;
border-left:none;
border-color:#FFFFFF;
}
a.slinks:link,a.slinks:visited{
font-weight:lighter;
font-family:Arial, Helvetica, sans-serif;
font-size:75%;
color:#333399;
width:100%;height:100%;
cursor:pointer;
text-decoration:none;
display:block;
padding-top:.2em;
padding-bottom:.2em;
padding-left:1.0em;
}
#Menu{margin-left:0;padding:0;}
#Menu a{text-decoration:none;}
.Main a:hover{
color:#003366;
width:100%;
height:100%;
background-color:#E8E8E8;
}
.rule{
margin-left:3.5px;
width:110px;
}
</style>
Javascript-----------------------------------------------
<script type="text/javascript" language="javascript">
function togSub(link) {
var myURL = window.location.href+"";
var menu = link.parentNode.getElementsByTagName('ul')[0];
var smenus = document.getElementsByTagName("ul");
for (i=0; i<smenus.length; i++){
if(smenus[i].className == 'Item'){
if (smenus[i].style.display == 'block'){
smenus[i].style.display='none';
smenus[i].parentNode.getElementsByTagName('a')[0].style.backgroundColor = '';
smenus[i].parentNode.getElementsByTagName('a')[0].style.color = '';
}
}
}
if(menu.className == 'Item'){
if(menu.style.display == ''){
menu.style.display = 'block';
link.style.backgroundColor = '#E8E8E8';
link.style.color = '#003366';
}
else{
menu.style.display = '';
link.style.backgroundColor = '';
link.style.color = '';
}
}
}
window.onload = function() {
var search_term = "directoryOne";
var url_check = myURL.indexOf(search_term);
var allLinks;
var currentLink;
var keyFound;
if (url_check!= -1) {
var menuContainer = document.getElementById("Menu");
var allLinks = menuContainer.getElementsByTagName('a');
for(i = 0; i<allLinks.length; i++){
currentLink = allLinks[i].href;
keyFound = currentLink.indexOf(search_term);
alert(keyFound);
if(currentLink!= -1){
if (allLinks[i].className == 'mlinks'){
//var displayMenu= link.parentNode.getElementsByTagName('ul')[0];
//var displayMenu = allLinks[i].parentNode.getElementsByTagName('ul')[0];
//alert(allLinks[i].className);
//alert(displayMenu.className);
//var menu = allLinks[i].parentNode.getElementsByTagName('ul')[0];
//alert(allLinks.href);
//displayMenu.style.display = 'block';
//allLinks[i].style.backgroundColor = '#E8E8E8';
//allLinks[i].style.color = '#003366';
}
}
}
}
}
</script>
I am trying to get the menu to stay open depending on which page the users are on. The variable "earch_term" is the directory of the page they are viewing. Each main menu button has a seperate directory and the pages in the submenus are stored in these directories. I thought the best way to keep each page's respective menu open will be to see from the URL in which directory the user is in, so for example if they are in the directoryOne, its respective main menu will open so for this on it will be Main Menu Two.
So first I check if the URL of the page I am on contains the directory I am in, if so I get all the links from the document. Then I loop through all the links and see if the links contain the directory name, if they do then I check their class name(because I only want to get the parent link which has a different class). After that I take its childnode(the submenu) and make it visible. My problem is that when I try to get a specific link using the above 2 conditions, other than the links who should pass the condition found. I am sorry if none of this makes sense, but I really need help on this. If this is not the correct way to add this functionality, then could you please suggest another way if there is. Thanks alot
Sunny
