my hide/display function fails when element begins display:none

[libsfan01]

function switch_display(switchme) {
var el = document.getElementById(switchme);
el.style.display = (el.style.display == 'none')? '' : 'none';
}

im using this function to switch the display on and off of a given
element. BUT if the element is set to 'none' to begin with then it wont
display it.

please help...

 

[Evertjan.]

libsfan01 wrote on 16 jan 2007 in comp.lang.javascript:

function switch_display(switchme) {
var el = document.getElementById(switchme);
el.style.display = (el.style.display == 'none')? '' : 'none';
}

im using this function to switch the display on and off of a given
element. BUT if the element is set to 'none' to begin with then it wont
display it.

I doubt that, please show a working nonworking example.

What do you exactly mean by
"the element is set to 'none' to begin with"?

 

[ASM]

libsfan01 a écrit :

function switch_display(switchme) {
var el = document.getElementById(switchme);
el.style.display = (el.style.display == 'none')? '' : 'none';
}

im using this function to switch the display on and off of a given
element. BUT if the element is set to 'none' to begin with then it wont
display it.

Yes, of course.
Why ?
because if it isn't set to 'none' it's set to ''
that's to say : nothing comprehensive
or "normal" state ( witch is 'none' ! as set before)

following characteristic of element ( block or inline or ... )

el.style.display = (el.style.display == 'none')? 'block' : 'none';


But always prefer :

function switcher(what) {
what = (typeof(what)=='undefined')?
what.style : document.getElementById(what).style;
what.display = what.display==''? 'none' : '';
}

And set your display element(s) to none via javascript.

 

[libsfan01]

I doubt that, please show a working nonworking example.

Ok

When i put the display:none; command in the actual element e.g.
style='display:none;' it does work fine but when i put it in the css at
the top of the page (above the javascript, as a style applied to the
elements id) it wouldnt work? is there something wrong with the way i
was initially laying out the code on the page?

 

[ASM]

libsfan01 a écrit :

When i put the display:none; command in the actual element e.g.
style='display:none;' it does work fine but when i put it in the css at
the top of the page (above the javascript, as a style applied to the
elements id) it wouldnt work? is there something wrong with the way i
was initially laying out the code on the page?

JavaScript knows only JavaScript instructions
and
with style='display:none;' as attribute of element
JavaScript can find this attribute (style) using instruction :
element_style = document.getElementById('something').style;

It is why it is better to give this attribute via JavaScript

Another way is to use css classes :

css :
=====
#truc { display: none; }
#truc.show { display: block; }

html :
======
<div id="truc"> blah </div>
<p><a href="#" onclick="switcher('truc');return false;">
hide/show
</a>
</p>

JS :
====
function switcher(whatId) {
var s = document.getElementById(whatId);
s.className = s.className==''? 'show' : '';
}

 

[Evertjan.]

libsfan01 wrote on 16 jan 2007 in comp.lang.javascript:

Ok

You say "ok" but I don't see that example.

When i put the display:none; command in the actual element e.g.
style='display:none;'

It is called an inline style setting, not a command.

it does work fine but when i put it in the css at
the top of the page (above the javascript, as a style applied to the
elements id)
it wouldnt work? is there something wrong with the way i
was initially laying out the code on the page?

How could we know if you keep the actual code secret?

Try:

================ test.html tested on IE7 ===============
<style type='text/css'>
#myId1 {display:none;}
.myClass {display:none;}
</style>

<div id='myId1'>This is it</div>
<button
onclick =
'alert(document.getElementById("myId1").style.display);'>
click</button>

<div id='myId2' style='display:none;'>This is it too/two</div>
<button
onclick =
'alert(document.getElementById("myId2").style.display);'>
click</button>

<div id='myId3' class='myClass'>This is it three</div>
<button
onclick =
'alert(document.getElementById("myId3").style.display);'>
click</button>
========================================================

When you test and analyze the above,
now you know where the problem lies,
you can easily work aroud it, don't you think?