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

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

Subscribe Post Reply

3853

kaeli

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>  </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

lawrence

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>  </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

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

kaeli

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

Michael Winter

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

lawrence

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

Michael Winter

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

kaeli

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

Robert

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

Lasse Reichstein Nielsen

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

Thomas 'PointedEars' Lahn

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

Dr John Stockton

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

by: Québec | last post by:

Hi, I went on Honnen FAQ and tried other solutions. This is suppose to be easy? Is one of theese suppose to work on IE6? uss.visibility = visible; uss.style.visibility = visible;...

Javascript

Syntax Problems with Function

by: Steve Bishop | last post by:

I am trying to check for a fields value on load and hide certian controls based on it's value. I am having trouble with the "else" statement and the bracket placement. Help appreciated. Here is the...

Javascript

document.getElementById comes out NULL help!

by: Gary Mayor | last post by:

Hi, I'm back again. Basically i'm trying to draw a box over an image which is turning out to be a nightmare. The problem i'm getting at the moment is that i'm creating a line with <div which works...

Javascript

Border lines in hidden div bleed through into visible div

by: Jon | last post by:

Hi all, I am trying to create a page that contains a number of div elements, with links on the left side of the page allowing the user to select which div to display. Some of the pages contain...

Javascript

Code works in Netscape 7.1 but not IE ---- document.getElementById('other').style.visibility='hidden';

by: lawrence | last post by:

Can anyone tell me why this code works in Netscape 7.1 but not in IE??? <SCRIPT type='text/javascript'> function makeVisible(nameOfDiv) {...

Javascript

DIVs don't appear in FireFox - any ideas?

by: Gregor | last post by:

I am trying to use an image map with a mouseover function to show various DIV tags. I am not an expert, but what I've come up with works in IE but not in FireFox. Any insight would be greatly...

HTML / CSS

Help! document.getElementById("folderMenu").cells has no properties when using FireFox

by: davidkarlsson74 | last post by:

Error: document.getElementById("folderMenu").cells has no properties File: http://www.volkswagen.se/tillbehor/js/foldermenu.js Rad: 49 The function activates different DIV:s, but doesn't seem to...

Javascript

A problem with an apparently common JS menu...

by: Bryan | last post by:

I am attempting to make a web page more Netscape friendly... <a href="http:www.gordonceilings.com"></a> I have already corrected the table issues in an offline staging site (where I do the...

Javascript

Javascript Style Properties for Dynamic Images in Safari

by: Joe Cox | last post by:

I am having a problem with style properties for dynamic images in Mac OS X Safari. By dymanic images, I mean images allocated with the javascript 'new Image()' call. With static images (created...

Javascript

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

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

Similar topics