Page 1 of 1

Simple JavaScript Function Help

Posted: Tue Feb 14, 2006 12:30 pm
by jayshields
I'm rubbish with JavaScript, don't understand why this won't work, or what the errors mean that FireFox gives me.

Code: Select all

function toggleHiddenElement(elementname) {
	if (document.getElementById(elementname).style.display == 'none') {
		document.getElementById(elementname).style.display = '';
	} else {
		document.getElementById(elementname).style.display = 'none';
	}
}
is my js function.

Code: Select all

<input type="checkbox" name="noimage" value="yes" onClick="toggleHiddenElement(hideme2)" />
is my function call.

Code: Select all

Error: document.getElementById(elementname) has no properties
Warning: Element referenced by ID/NAME in the global scope. Use W3C standard document.getElementById() instead.
is what FireFox tells me.

I've tried a few variations of my code now and it's not having any of it.

Google doesn't help either.

Thanks people.

Posted: Tue Feb 14, 2006 1:16 pm
by matthijs
Sorry I cant help you personally but I can point you to this recent article http://www.dustindiaz.com/seven-togglers/ from Dustin Diaz about 7 ways to toggle / show/hide with javascript.
However, I just found out he's switching hosts so you'll have to look at the google cache page to see it at the moment.
(he's got much more great javascript articles by the way)

Posted: Tue Feb 14, 2006 1:53 pm
by Chris Corbyn

Code: Select all

onClick="toggleHiddenElement(hideme2)"
You're mssing quotes around hideme2. Javascript is trying to parse that as a variable which is undefined ;)

EDIT | Oh yeah and make sure you have id="hideme2" on the attributes for the element this refers to. name="hideme2" is wrong. Not sure if you've done that or if the error is being spooky :)

Posted: Tue Feb 14, 2006 1:55 pm
by jayshields
Phew! Thanks alot.

I'm slooooowwwwllllyyy learning this JavaScript lark.

Edit: Wwwwaaahhhh....

Code: Select all

Error: document.GetElementByID is not a function
Line: 8
:?

Posted: Tue Feb 14, 2006 2:17 pm
by feyd
GetElementById

lowercase d..

Posted: Tue Feb 14, 2006 2:41 pm
by Chris Corbyn
feyd wrote:GetElementById

lowercase d..
And lowercase "g". In JavaScript keywords start lowercase and change case for the first letter of each word:

getElementById()
getElementsByTagName()


The exception is the "Event" object. The reason for that is because "window" defaults to be the default top level object, and there's actually a window.event property already. "Event" is a top level object itself so this is needed to distinguish the two.

Posted: Tue Feb 14, 2006 2:44 pm
by feyd
heh yeah.. forgot that too. :P

Posted: Tue Feb 14, 2006 2:52 pm
by jayshields
Thanks guys. I'll sort that out after the football :P

I just presume things are like they are in PHP, hence the case insensitive function name presumption.

I need to buy a book on JavaScript or something...!

Posted: Tue Feb 14, 2006 3:00 pm
by Chris Corbyn
jayshields wrote:I need to buy a book on JavaScript or something...!
http://www.amazon.co.uk/exec/obidos/ASI ... 50-7123925

That's the one the Open University send out. I have it and recommend it as a non-intimidating begginers book. And it's cheap ;)

Posted: Tue Feb 14, 2006 3:16 pm
by feyd
As always, I can highly recommend O'Reilly's: http://www.oreilly.com/catalog/jscript4/index.html

Posted: Tue Feb 14, 2006 3:38 pm
by matthijs
Definately go for:
http://domscripting.com/ by Jeremy Keith
and
DHTML Utopia: Modern Web Design Using JavaScript & DOM http://www.sitepoint.com/books/ by Stuart Langridge
if you want to know about the new unobtrusive cross-browser DOM scripting stuff.