By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,727 Members | 757 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,727 IT Pros & Developers. It's quick & easy.

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

P: n/a
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.visibilit y='hidden';
document.getElementById('entries').style.visibilit y='hidden';
document.getElementById('newsletters').style.visib ility='hidden';
document.getElementById('images').style.visibility ='hidden';
document.getElementById('files').style.visibility= 'hidden';
document.getElementById('comments').style.visibili ty='hidden';
document.getElementById('links').style.visibility= 'hidden';
document.getElementById('members').style.visibilit y='hidden';
document.getElementById('design').style.visibility ='hidden';
document.getElementById('settings').style.visibili ty='hidden';
document.getElementById('categories').style.visibi lity='hidden';
document.getElementById('other').style.visibility= 'hidden';
document.getElementById('onePanel').style.visibili ty='hidden';

document.getElementById(nameOfDiv).style.visibilit y='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>
Jul 23 '05 #1
Share this Question
Share on Google+
12 Replies


P: n/a
In article <da**************************@posting.google.com >,
lk******@geocities.com enlightened us with...
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?


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.visibilit y='hidden';
document.getElementById('entries').style.visibilit y='hidden';

document.getElementById(nameOfDiv).style.visibilit y='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>

--
--
~kaeli~
Black holes were created when God divided by 0.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

Jul 23 '05 #2

P: n/a
kaeli <ti******@NOSPAM.comcast.net> wrote in message news:<MP************************@nntp.lucent.com>. ..
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.visibilit y='hidden';
document.getElementById('entries').style.visibilit y='hidden';

document.getElementById(nameOfDiv).style.visibilit y='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>

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.visibili ty='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"?
Jul 23 '05 #3

P: n/a
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.visibili ty='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"?


That wouldn't be a syntax error, but it would certainly be a run-time
error.
if(document.getElementById('onePanel')){
document.getElementById('onePanel').style.visibili ty='hidden';
}

Jul 23 '05 #4

P: n/a
In article <da**************************@posting.google.com >,
lk******@geocities.com enlightened us with...

Would it cause a syntax error if I reference a DIV that doesn't exist?
No, but it will be a runtime error that will stop processing.
The code is dying on this line:
document.getElementById('onePanel').style.visibili ty='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"?


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.visibilit y='hidden';
}
// and so on
}
}
</script>

--
--
~kaeli~
He often broke into song because he couldn't find the key.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

Jul 23 '05 #5

P: n/a
On Wed, 22 Sep 2004 15:00:20 -0500, kaeli <ti******@NOSPAM.comcast.net>
wrote:

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


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[i].id == n) {return e[i];}
}
} 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

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #6

P: n/a
kaeli <ti******@NOSPAM.comcast.net> wrote in message news:<MP************************@nntp.lucent.com>. ..
In article <da**************************@posting.google.com >,
lk******@geocities.com enlightened us with...

Would it cause a syntax error if I reference a DIV that doesn't exist?
No, but it will be a runtime error that will stop processing.


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.visibilit y='hidden';
}
// and so on
}
}
</script>


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.
Jul 23 '05 #7

P: n/a
On 22 Sep 2004 20:32:41 -0700, lawrence <lk******@geocities.com> wrote:

[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.


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

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #8

P: n/a
In article <da**************************@posting.google.com >,
lk******@geocities.com enlightened us with...

This is hot stuff. I wasn't sure how to test for things in Javascript
but it looks pretty simple.
It can be.
Using the dot notation, Javascript
apparently resolves the expression and sees if the result is true?
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?


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

Jul 23 '05 #9

P: n/a
In article <da**************************@posting.google.com >,
lk******@geocities.com (lawrence) wrote:
if (document.getElementById)

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


Everything is a variable in Javascript. Yes, this includes functions.

At least this is how I currently think of things.

Robert
Jul 23 '05 #10

P: n/a
Robert <rc*******@my-deja.com> writes:
Everything is a variable in Javascript. Yes, this includes functions.


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.
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 23 '05 #11

P: n/a
lawrence wrote:
kaeli <ti******@NOSPAM.comcast.net> wrote in message
news:<MP************************@nntp.lucent.com>. ..
Please do not post attribution novels.
<SCRIPT type='text/javascript'>
function makeVisible(nameOfDiv) {
if (document.getElementById) {
if (document.getElementById('weblogs') &&
document.getElementById('weblogs').style) {
document.getElementById('weblogs').style.visibilit y='hidden';
}
// and so on
}
}
</script>


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?


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?


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
--
Troubled words of a troubled mind
Jul 23 '05 #12

P: n/a
JRS: In article <11****************@PointedEars.de>, dated Sun, 3 Oct
2004 18:22:21, seen in news:comp.lang.javascript, Thomas 'PointedEars'
Lahn <Po*********@web.de> posted :
lawrence wrote:
kaeli <ti******@NOSPAM.comcast.net> wrote in message
news:<MP************************@nntp.lucent.com>. ..


Please do not post attribution novels.

Present Usenet thinking encourages proper attributions; see Usefor work-
in-progress at
http://www.ietf.org/internet-drafts/...-useage-00.txt
http://www.ietf.org/internet-drafts/...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.

--
John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 MIME
Web <URL:http://www.uwasa.fi/~ts/http/tsfaq.html> -> Timo Salmi: Usenet Q&A.
Web <URL:http://www.merlyn.demon.co.uk/news-use.htm> : about usage of News.
No Encoding. Quotes before replies. Snip well. Write clearly. Don't Mail News.
Jul 23 '05 #13

This discussion thread is closed

Replies have been disabled for this discussion.