Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Not sure how to code this?

Status
Not open for further replies.
rsmldmv

rsmldmv

Programmer
Dec 20, 2011
3
US
I'm using VB.Net and Javascript is Visual Studio 2010.

I have a webpage that has several <div> elements. I have made these elements into server-side controls by adding the runat="server" attribute. Each of these <div> elements contains data that is displayed based on a menu selection. My problem is that I'm not sure if I'm coding my javascript statements correctly because I keep getting an error message (Error: 'document.getElementById(...)' is null or not an object)when I click on the menu item. When a menu item is clicked, the below javascript function is executed and the error occurs in each one of the case branches depending on which menu item was selected.

The "divID" parameter is actually the ID of each <div> element.

function OpenSection(divID) {
switch (divID) {
case 'SummarySection_DIV':
document.getElementById('SummarySection_DIV').visible = true;
break;
case 'WorkHistory_DIV':
document.getElementById('WorkHistory_DIV').visible = true;
break;
case 'SkillSets_DIV':
document.getElementById('SkillSets_DIV').visible = true;
break;
case 'Education_DIV':
document.getElementById('Education_DIV').visible = true;
break;
case 'ContactMe_DIV':
document.getElementById('ContactMe_DIV').visible = true;
break;
case 'PrintMe_DIV':
document.getElementById('PrintMe_DIV').visible = true;
break;
}
}
 
Sort by date Sort by votes
As all your DIVs have the same ID as what you are passing into your method, you could just do the following :

Code: 
function OpenSection(divID) 
{
     document.getElementById(divID).visible = true;
}

As for the issue, can you post the HTML that is output on the page ?

Greg Griffiths
Livelink Certified Developer & ECM Global Star Champion 2005 & 2006
 
Upvote 0 Downvote
The output isn't much. But here it is! Your suggestion makes sense as far as having only 1 line of code so I did make that change but it still errors out. I did forget to mention 1 thing...not sure if it's an issue or not but in my VB.Net code-behind, I have a routine that executes when the page loads that sets all the <div> elements visible attribute to "False".

Here's the output:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
<html xmlns="<head><title>
Resume of Blake McKenna
</title><link href="StyleSheet1.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function OpenSection(divID) {
document.getElementById(divID).visible = true;
/* switch (divID) {
case 'SummarySection_DIV':
document.getElementById('SummarySection_DIV').visible = true;
break;
case 'WorkHistory_DIV':
document.getElementById('WorkHistory_DIV').visible = true;
break;
case 'SkillSets_DIV':
document.getElementById('SkillSets_DIV').visible = true;
break;
case 'Education_DIV':
document.getElementById('Education_DIV').visible = true;
break;
case 'ContactMe_DIV':
document.getElementById('ContactMe_DIV').visible = true;
break;
case 'PrintMe_DIV':
document.getElementById('PrintMe_DIV').visible = true;
break;
} */
}

function ChangeCursor(ind) {
if (ind == 'T') {
document.body.style.cursor = 'pointer';
}
else {
document.body.style.cursor = 'default';
}
}
</script>
</head>
<body>
<form method="post" action="Main.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNzYyOTQyNjg2D2QWAgIDD2QWDgIFD2QWAgIBDw8WAh4ISW1hZ2VVcmwFEi9JbWFnZXMvQmxha2UxLmpwZ2RkAgcPFgQeCGRpc2FibGVkZB4HVmlzaWJsZWhkAgkPFgQfAWQfAmhkAgsPFgQfAWQfAmhkAg0PFgQfAWQfAmhkAg8PFgQfAWQfAmhkAhEPFgQfAWQfAmhkZKlGNu322+OCfV99nU9kUOYfKCS8dXBgi7qAiFGx4BVz" />
</div>

<div>
<table id="table_body" width="100%" style="border: 2px Solid #333311; margin-top: 5px;">
<tr>
<td id="Summary" class="SubTitles"><a onmouseover="ChangeCursor('T')" onmouseout="ChangeCursor('F')" onclick="OpenSection('SummarySection_DIV')" >Summary</a></td>
<td id="WorkHistory" class="SubTitles"><a onmouseover="ChangeCursor('T')" onmouseout="ChangeCursor('F')" onclick="OpenSection('WorkHistory_DIV')" >Work History</a></td>
<td id="SkillSets" class="SubTitles"><a onmouseover="ChangeCursor('T')" onmouseout="ChangeCursor('F')" onclick="OpenSection('SkillSets_DIV')" >Skill Sets</a></td>
<td class="Title">Resume of Blake McKenna</td>
<td id="Education" class="SubTitles"><a onmouseover="ChangeCursor('T')" onmouseout="ChangeCursor('F')" onclick="OpenSection('Education_DIV')" >Education</a></td>
<td id="ContactMe" class="SubTitles"><a onmouseover="ChangeCursor('T')" onmouseout="ChangeCursor('F')" onclick="OpenSection('ContactMe_DIV')" >Contact Me</a></td>
<td id="PrintMe" class="SubTitles"><a onmouseover="ChangeCursor('T')" onmouseout="ChangeCursor('F')" onclick="OpenSection('PrintMe_DIV')" >Print</a></td>
</tr>
</table>


<table width="100%">
<tr>
<td class="ErrMsg">
<span id="lblErrMsg"></span>
</td>
</tr>
<tr>
<td height="10"></td>
</tr>
</table>

<div id="PictureSection_DIV" style="position: relative;">
<table width="100%">
<tr>
<td class="ImageDIV">
<img id="imgMain" src="/Images/Blake1.jpg" style="border: 6px Solid Black;" />
</td>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>
 
Upvote 0 Downvote
If this is the entirety of your HTML, you have no elements with those ID's in your HTML.

Which means Javascript can't find them to change their display property.

You should be having something like:

Code: 
<div id="WorkHistory_DIV"></div>

For Javascript to be able to find and change their display property.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
Upvote 0 Downvote
I'm very new to javascript programming so I'm not exactly sure what that means or how to rectify it.
 
Upvote 0 Downvote
ID's as their name implies identify HTML elements such as divs or spans uniquely. The javascript function getElementById uses these ID's to acquire a reference to the html element and access its properties.

Think of boxes with labels on them. You ask for a box by its label. What happens if you ask for a box labeled "books", but there is no box with that label? They can't give you that box.

Same with, Javascript for it to access an element in needs to exist in the HTML. You don't have any elements with the ID's you are looking for, so Javascript returns a null or not an object error.

To fix it you need have elements with those ID's as shown above.

As an extra there is no property "visible". The Property name is Visibilty and it can have a value of "hidden" and "visible", among others.


With that said however, I'm not sure how this ties into your runat server deals though. Your code if it worked would only make certain divs visible. That's all.

For instance this:

Code: 
document.getElementById('mydiv').visibility="visible";

...

<div id="mydiv" style="visibilty:hidden;">Hello I was a hidden Div</div>

Would simply show the hidden div with the ID of "mydiv".

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
381
Kennelbloke
Kennelbloke
rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
281
rogerte
rogerte
Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
275
Rayj0000
Rayj0000
lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
313
lexer
lexer
penguinspeaks
  • Locked
  • Question
How do I pass a classic asp variable to JS
Replies
1
Views
482
xwb
xwb

Part and Inventory Search

Sponsor

Back
Top