I apparently don't get the syntax of document.getElementById(nameOfDiv).style.visibility='visible';

L

lawrence

The following function correctly makes everything invisible but then
fails to turn the one chosen DIV back to visible. I imagine I'm
getting the syntax of the variable wrong? I've tried this with both
single quotes and no single quotes, but it doesn't work either way.
What am I doing wrong?


<SCRIPT type='text/javascript'>
function makeVisible(nameOfDiv) {
document.getElementById('weblogs').style.visibility='hidden';
document.getElementById('entries').style.visibility='hidden';
document.getElementById('newsletters').style.visibility='hidden';
document.getElementById('images').style.visibility='hidden';
document.getElementById('files').style.visibility='hidden';
document.getElementById('comments').style.visibility='hidden';
document.getElementById('links').style.visibility='hidden';
document.getElementById('members').style.visibility='hidden';
document.getElementById('design').style.visibility='hidden';
document.getElementById('settings').style.visibility='hidden';
document.getElementById('categories').style.visibility='hidden';
document.getElementById('other').style.visibility='hidden';
document.getElementById('onePanel').style.visibility='hidden';

document.getElementById(nameOfDiv).style.visibility='visible';
}
</script>




<div id="options">
<a href="#"><img src="weblogs.gif"
onClick="makeVisible('weblogs')"></a>
<a href="#"><img src="weblogEntries.gif"
onClick="makeVisible('entries')"></a>
<a href="#"><img src="webNewsletterPages.gif"
onClick="makeVisible('newsletters')"></a>
<a href="#"><img src="images.gif"
onClick="makeVisible('images')"></a>
<a href="#"><img src="files.gif" onClick="makeVisible('files')"></a>
<a href="#"><img src="comments.gif"
onClick="makeVisible('comments')"></a>
<a href="#"><img src="links.gif" onClick="makeVisible('links')"></a>
<a href="#"><img src="categories.gif"
onClick="makeVisible('categories')"></a>
<a href="#"><img src="users.gif"
onClick="makeVisible('members')"></a>
<a href="#"><img src="design.gif"
onClick="makeVisible('design')"></a>
<a href="#"><img src="settings.gif"
onClick="makeVisible('settings')"></a>
<a href="#"><img src="other.gif" onClick="makeVisible('other')"></a>
</div>
 
K

kaeli

The following function correctly makes everything invisible but then
fails to turn the one chosen DIV back to visible. I imagine I'm
getting the syntax of the variable wrong? I've tried this with both
single quotes and no single quotes, but it doesn't work either way.
What am I doing wrong?
Click to expand...

You have a syntax error somewhere else in code you didn't post.

Because this works just fine.

<html>
<head>
<title> New Document </title>
<SCRIPT type='text/javascript'>
function makeVisible(nameOfDiv) {
document.getElementById('weblogs').style.visibility='hidden';
document.getElementById('entries').style.visibility='hidden';

document.getElementById(nameOfDiv).style.visibility='visible';
}
</script>
</head>

<body>
<div id="weblogs">weblogs</div>
<div id="entries">entries</div>
<div id="options">
<a href="#"><img src="tile.jpg"
onClick="makeVisible('weblogs')"></a>
<a href="#"><img src="tile.jpg"
onClick="makeVisible('entries')"></a>
<p>&nbsp; </p>
</body>
</html>

--
 
L

lawrence

kaeli said:
You have a syntax error somewhere else in code you didn't post.

Because this works just fine.

<html>
<head>
<title> New Document </title>
<SCRIPT type='text/javascript'>
function makeVisible(nameOfDiv) {
document.getElementById('weblogs').style.visibility='hidden';
document.getElementById('entries').style.visibility='hidden';

document.getElementById(nameOfDiv).style.visibility='visible';
}
</script>
</head>

<body>
<div id="weblogs">weblogs</div>
<div id="entries">entries</div>
<div id="options">
<a href="#"><img src="tile.jpg"
onClick="makeVisible('weblogs')"></a>
<a href="#"><img src="tile.jpg"
onClick="makeVisible('entries')"></a>
<p>&nbsp; </p>
</body>
</html>
Click to expand...


Would it cause a syntax error if I reference a DIV that doesn't exist?
The code is dying on this line:


document.getElementById('onePanel').style.visibility='hidden';


This Javascript is included on every page, and on some pages there is
no element named "onePanel". Could that cause problems? How would I
test for "onePanel"?
 
L

Lee

lawrence said:
Would it cause a syntax error if I reference a DIV that doesn't exist?
The code is dying on this line:


document.getElementById('onePanel').style.visibility='hidden';


This Javascript is included on every page, and on some pages there is
no element named "onePanel". Could that cause problems? How would I
test for "onePanel"?
Click to expand...

That wouldn't be a syntax error, but it would certainly be a run-time
error.


if(document.getElementById('onePanel')){
document.getElementById('onePanel').style.visibility='hidden';
}
 
K

kaeli

Would it cause a syntax error if I reference a DIV that doesn't exist?
Click to expand...

No, but it will be a runtime error that will stop processing.
The code is dying on this line:


document.getElementById('onePanel').style.visibility='hidden';


This Javascript is included on every page, and on some pages there is
no element named "onePanel". Could that cause problems? How would I
test for "onePanel"?
Click to expand...

If objects may or may not exist, test for them. All of them.

You should also be checking if the browser even supports getElementById if
this is on the 'net. Also, not all browsers that support that also support
style. Older versions of Opera had problems with it, IIRC, and there are
countless browsers out there now that may or may not support it.

<SCRIPT type='text/javascript'>
function makeVisible(nameOfDiv) {
if (document.getElementById) {
if (document.getElementById('weblogs') &&
document.getElementById('weblogs').style) {
document.getElementById('weblogs').style.visibility='hidden';
}
// and so on
}
}
</script>



--
 
M

Michael Winter

[snip]
function makeVisible(nameOfDiv) {
if (document.getElementById) {
if (document.getElementById('weblogs') &&
document.getElementById('weblogs').style) {
document.getElementById('weblogs').style.visibility='hidden';
}
// and so on
}
}
Click to expand...

Or

/* Ensure that trying to obtain a reference is always meaningful.
* Note: That's not the same as always getting a reference.
*/
var getRefById = document.getElementById ?
function(n) {return document.getElementById(n);}
: document.all ?
function(n) {
/* Ensure that the document.all collection
* returns only one element and that it
* matches by id, not name.
*/
var e = document.all[n], l = e.length;
if('number' == typeof l) {
for(var i = 0; i < l; ++i) {
if(e.id == n) {return e;}
}
} else if(e.id == n) {return e;}
return null;
}
: function() {return null;};

function setVisibility(o, v) {
if(o) {(o.style || o).visibility = v;}
}

function makeVisible(id) {
setVisibility(getRefById('weblogs'), 'hidden');
// ...
setVisibility(getRefById(id), 'visible');
}

Whilst it may look less efficient at first glance, the getRefById
assignment is a one-off cost. After that, getRefById and setVisibility
encapsulate the testing of properties and the change of style.

If you don't like that, at least save the return from the getElementById
call(s). Repeated look-ups are slower and produce larger code.

Mike
 
L

lawrence

kaeli said:
No, but it will be a runtime error that will stop processing.
Click to expand...

That's must be what's happening then.



If objects may or may not exist, test for them. All of them.

You should also be checking if the browser even supports getElementById if
this is on the 'net. Also, not all browsers that support that also support
style. Older versions of Opera had problems with it, IIRC, and there are
countless browsers out there now that may or may not support it.

<SCRIPT type='text/javascript'>
function makeVisible(nameOfDiv) {
if (document.getElementById) {
if (document.getElementById('weblogs') &&
document.getElementById('weblogs').style) {
document.getElementById('weblogs').style.visibility='hidden';
}
// and so on
}
}
</script>
Click to expand...

This is hot stuff. I wasn't sure how to test for things in Javascript
but it looks pretty simple. Using the dot notation, Javascript
apparently resolves the expression and sees if the result is true?
That's common enough in all languages, I guess, though I'm still
getting used to how flexible Javascript's dot notation is. Your line:

if (document.getElementById)

you're simply checking to see if document has the method
getElementById? That is awfully easy. In PHP I'd have to use
method_exists($document, "getElementById"); I was wondering how to
do the same in Javascript.
 
M

Michael Winter

[snip]
Your [kaeli's] line:

if (document.getElementById)

you're simply checking to see if document has the method
getElementById? That is awfully easy. In PHP I'd have to use
method_exists($document, "getElementById"); I was wondering how to
do the same in Javascript.
Click to expand...

That's what's termed "feature detection". Take a look at section 4.26 of
the FAQ (and its links):

<URL:http://jibbering.com/faq/>

Mike
 
K

kaeli

This is hot stuff. I wasn't sure how to test for things in Javascript
but it looks pretty simple.
Click to expand...

It can be.
Using the dot notation, Javascript
apparently resolves the expression and sees if the result is true?
Click to expand...

Well...not exactly.
It has something to do with how expressions are evaluated in JS for testing
in if/while/for statements. I can't explain it very well, but basically, I'm
testing for an object, and the object doesn't exist, so it's not defined (or
null or something) which is comparable to false. JS does the conversion from
what it really is to the equivalent of false. (or true, as the case may be)
Someone else explained it WAY better (and probably more accurate) than that
some time ago on this list.
That's common enough in all languages, I guess, though I'm still
getting used to how flexible Javascript's dot notation is. Your line:

if (document.getElementById)

you're simply checking to see if document has the method
getElementById?
Click to expand...

Close enough.
I know it's actually a little more complicated than that, but I suck at
explaining things. I'm good at applying things, but I am really bad at
explaining why they work. *LOL*

This has a blurb.
http://jibbering.com/faq/#FAQ4_26

If you'd like more explained about it, post a new question and maybe one of
the more eloquent gurus will see it. :p

--
--
~kaeli~
Synonym: the word you use in place of a word you can't
spell.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace
 
L

Lasse Reichstein Nielsen

Robert said:
Everything is a variable in Javascript. Yes, this includes functions.
Click to expand...

Actually, there are two concepts that "everything" is one of:
variable or property.

For "document.getElementById", the (global) variable "document" is
resolved to an object, and the property "getElementById" of it is
read. If it exists, it is most likely a function. Properties that
are functions are also called "methods", but that just means
"property that is function".

Local variables (declared with "var" inside a function body or declared
as parameters of functions) are not properties of any accessible object.
Properties of objects are not variables [1].

/L
[1] Except that *global* variables are also properties of the global
object, and can be accessed as both.
 
T

Thomas 'PointedEars' Lahn

lawrence said:
news:<[email protected]>...
Click to expand...

Please do not post attribution novels.
This is hot stuff. I wasn't sure how to test for things in Javascript
but it looks pretty simple. Using the dot notation, Javascript
apparently resolves the expression and sees if the result is true?
Click to expand...

No, the expression, no matter if the property is referenced using the dot
notation or the bracket notation, is resolved to an object reference or a
value. If the reference is valid or the value is a true-value, it is
converted to `true,' otherwise to `false'. That is why the above function
can and should be modified:

function makeVisible(nameOfDiv)
{
var t;
if ((t = typeof document.getElementById) == "function"
|| (t == "object" && document.getElementById)) // [1]
{
var o = document.getElementById(nameOfDiv); // [2]
if (o // [3]
&& typeof (o = o.style) != "undefined" // [4]
&& typeof o.visibility != "undefined") // [5]
{
o.visibility = "hidden";
}
// and so on
}
}

[1] Testing that the call operator is applicable to the property,
i.e. it is really a method, is better than only testing if
the property exists and has a value that converts to `true'.
However, if compatibility to JavaScript 1.0 script engine
is required, the "typeof" operator cannot be used.

[2] The argument of the function should be used here.

[3] This will prevent the script from yielding runtime errors if
there is either no such object or if the result of getElementById()
is undefined (see W3C DOM Level 1+ HTML).

[4] Testing for the value of the "style" property alone may not result in
desired behavior; there are DOMs which return the value of the "style"
attribute if the style object is read-accessed directly; if the "style"
attribute has not been set, the function will not change the
"visibility" property even if that would be possible.

[5] When writing to values of properties of host objects, it should be
tested whether these properties already exist prior; if they do not,
ECMAScript Ed. 3 allows a compliant implementation to exhibit any
behavior in the case the property must be added first.
That's common enough in all languages, I guess, though I'm still
getting used to how flexible Javascript's dot notation is. Your line:

if (document.getElementById)

you're simply checking to see if document has the method
getElementById?
Click to expand...

No, he is only checking if the object refered to by "document" has
a _property_ named "getElementById", he does not check if it is a
function-property, a method; therefore modification [1] above.


PointedEars
 
D

Dr John Stockton

JRS: In article <[email protected]>, dated Sun, 3 Oct
2004 18:22:21, seen in Thomas 'PointedEars'
Lahn said:
Please do not post attribution novels.
Click to expand...


Present Usenet thinking encourages proper attributions; see Usefor work-
in-progress at
http://www.ietf.org/internet-drafts/draft-ietf-usefor-useage-00.txt
http://www.ietf.org/internet-drafts/draft-ietf-usefor-article-13.txt

Once more, you are reviving an elderly thread without giving visible
warning to users of standards-compliant newsreaders; that is
discourteous, and mot at all like the typical modern German.

Someone please quote this, or use it when next appropriate; Thomas Lahn
appears to prefer not to read anything that might criticise him.

His signature is also not in compliance with good Usenet practice.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Code works in Netscape 7.1 but not IE ---- document.getElementById('other').style.visibility='hidden 3
Image not changing between "mute" & "un-mute" images. 5
Only one table shows up with the information 2
JS in FireFox 1
Sort by number of characters 1
Help with code 0
I need help making a zooming function 11
Help with my responsive home page 2

Members online

No members online now.
Total: 42 (members: 0, guests: 42)
Robots: 411

Forum statistics

Threads
473,769
Messages
2,569,576
Members
45,054
Latest member
LucyCarper

Latest Threads

Top