Can this be written in a more efficient way

[Guest]

Hi

I've managed to figure out how to write some code which acts to
show/hide sections of a web page. The code is below:

function showreimburse(){
document.getElementById("reimburse").style.display="block";
}
function hidereimburse(){
document.getElementById("reimburse").style.display="none";
}
function showreimburselength(){
document.getElementById("reimburselength").style.display="block";
}
function hidereimburselength(){
document.getElementById("reimburselength").style.display="none";
}
function showq2b(){
document.getElementById("q2b").style.display="block";
}
function hideq2b(){
document.getElementById("q2b").style.display="none";
}
function showwhere(){
document.getElementById("where").style.display="block";
}
function hidewhere(){
document.getElementById("where").style.display="none";
}
function showquestion3a(){
document.getElementById("question3a").style.display="block";
}
function hidequestion3a(){
document.getElementById("question3a").style.display="none";
}

which I trigger in the web page with this sort of thing. All fine so
far. However is it possible to write the javascript in a more
effiecient manner.

Thanks for reading.

Alex

 

[Lee]

alex_NOSPAM_BILLEREY@HOTMAILDOTCOM said:

Hi

I've managed to figure out how to write some code which acts to
show/hide sections of a web page. The code is below:

function showreimburse(){
document.getElementById("reimburse").style.display="block";
}
function hidereimburse(){
document.getElementById("reimburse").style.display="none";
}
function showreimburselength(){
document.getElementById("reimburselength").style.display="block";
}
function hidereimburselength(){
document.getElementById("reimburselength").style.display="none";
}
function showq2b(){
document.getElementById("q2b").style.display="block";
}
function hideq2b(){
document.getElementById("q2b").style.display="none";
}
function showwhere(){
document.getElementById("where").style.display="block";
}
function hidewhere(){
document.getElementById("where").style.display="none";
}
function showquestion3a(){
document.getElementById("question3a").style.display="block";
}
function hidequestion3a(){
document.getElementById("question3a").style.display="none";
}

which I trigger in the web page with this sort of thing. All fine so
far. However is it possible to write the javascript in a more
effiecient manner.

Yes.
Where you are currently calling "hidequestion3a()", for example,
simply replace that with:

document.getElementById("question3a").style.display="none";

If you want fewer keystrokes, rather than more efficient:

function hide(id) {
document.getElementById(id).style.display="none";
}
function show(id) {
document.getElementById(id).style.display="block";
}

or:

function setDisplay(id,value) {
document.getElementById(id).style.display=value;
}

 

[Ronaldo Junior]

What about this?

function hideSomething (what, whatTo) {
var obj = document.getElementById(what);
if(obj === null) return;
obj.style.display = whatTo;
}

Then call...

hideSomething("question3a", "none");

 

[Evertjan.]

Ronaldo Junior wrote on 18 jan 2006 in comp.lang.javascript:

What about this?

function hideSomething (what, whatTo) {
var obj = document.getElementById(what);
if(obj === null) return;
obj.style.display = whatTo;
}

Then call...

hideSomething("question3a", "none");

That is less efficient tha the loop solutions,
where the whole point of testing was ending
the series of available divs.

And your function can be simplified:

function hideSomething(whatID, whatTo) {
var obj = document.getElementById(whatID);
if (obj) obj.style.display = whatTo;
}

Or even more so:

function hideSomething(whatID, whatTo) {
if (obj = document.getElementById(whatID))
obj.style.display = whatTo;
}

 

[Dr John Stockton]

JRS: In article <[email protected]>
, dated Wed, 18 Jan 2006 09:42:03 remote, seen in
alex_NOSPAM_BILLEREY@HOTMAILDOTCOM

[similar] ...

function showquestion3a(){
document.getElementById("question3a").style.display="block";
}
function hidequestion3a(){
document.getElementById("question3a").style.display="none";
}

which I trigger in the web page with this sort of thing. All fine so
far. However is it possible to write the javascript in a more
effiecient manner.

YSCIB. Yes.

Evidently (at least typically) the argument to
document.getElementById("question3a")
is a constant; and the call is made at least twice and maybe more often.
Now getElementById is a searching operation, and takes time, especially
on a large page.

You could write those functions as

var gIDQ3A = document.getElementById("question3a")

function showquestion3a() { gIDQ3A.style.display="block" }
function hidequestion3a() { gIDQ3A.style.display="none" }

and perhaps move .style as well. There ought to be a way of getting a
"pointer" to gIDQ3A.style.display itself; but I don't know of one.

Never perform a given lookup many times if it can easily enough be
avoided.

And now the content of the functions is sufficiently simple that it can
reasonably be written in-line, saving the overhead of a function call.


OTOH, the time taken by simple code that affects the appearance of the
screen will be dominated by screen-handling.

OTTH, the screen should be rendered only once for each set of calls.