<a href="#case_{$value.ID}" onClick="javascript:showHideField('case_1',2);">+</a>
<div id="case_1" style="visibility:hidden;display:none;">
Some Text
</div>
You don’t need to have “javascript:” in an onclick attribute, that might be a problem. Normally to show a <div>, you set style.display=“block”, not style.display=“inline”.
Why are you setting visibility and display? Wouldn’t just display do what you need?
Also, how is getRefById defined? Have you checked it works in IE? Why don’t you just use document.getElementById(), or Prototype’s $() function?
It looks like getRefById contains browser-detection code. There is no need for that nowadays, unless you still support Netscape 4.0 (hay, it’s only 10 years old…) so just use the W3C methods instead.
Just use this:
function getRefById(id)
{
return document.getElementById(id);
}
Many people think that “document.getElementById” is too long (as in the number of characters you have to type in) for every-day use, so in the modern Javascript libraries, a function like this is often defined:
function $(elementOrId) {
if (typeof elementOrId == 'string') {
return document.getElementById(elementOrId);
} else {
return elementOrId;
}
}
Just calling $(“my-element”) is nice and short.
It is becoming something of a standard. One advantage over the getRefById method, is that you can use elements and IDs interchangeably with $(). It means that you can write functions which accept elements, but you can also call them directly with an element ID, which is often handy.
Prototype is a useful Javascript library, which adds useful things to the language. Get it here: http://www.prototypejs.org/
No, it contains object detection code. There’s a difference.
Yes, functions like that are obsolete. Besides document.layers doesn’t work like document.all in all situations, so unless you actually test in Netscape 4.x including it in your code is just plain silly.
just one last question. there might come a point that I have to pass 50 arguments to the function and process them.
Would it have any impact on the performance?
[offtopic]
BTW, framework at http://www.prototypejs.org/ you mentioned, how deep and useful it is? i assume you have used it so how much helpful was it?
[/offtopic]
It may use that mechanism, but the intent clearly is browser detection. If not, first condition would contain only one object check, looking for document.getElementById, not this more complex condition:
document.getElementById && !document.all
there might come a point that I have to pass 50 arguments to the function and process them
In that case, it might be easier to give them a class name, and look for them like this:
function showHide(className, parentElement)
{
var parentElement = parentElement || document;
var divs = parentElement.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
if (divs[i].className == className) {
showHideField(divs[i]);
}
}
}
This gets all the divs in the document, (or divs inside parentElement if you know where they are, to save going through the shole page), and then call showHideField on the ones with the correct className.
So, you could call it like this:
showHide("showHideContents");
And, yes, I do find Prototype useful. For example, it contains a getElementsByClassName method, which you could use to simplify the above code. (Though internally it still uses getElementsByTagName and an if(className).)