Simple script does not work

[mantrid]

Can anyone see why this simple script doesnt make the element visible? It
starts of as hidden but will not show when the button is clicked. This has
worked for me before but I cannot see what is different.

Thanks


<script language="Javas cript">
<!--
function addnewsub(){
var newsubject = document.getEle mentById('newsu b');
newsubject.styl e.display='';
}
//-->
</script>

<input name="Submit2" type="button" class="BodyText " onClick="addnew sub()"
value="New">

here is the relevent code from table

<tr id="newsub" style="display: none;" class="DynamicF orms">
<td>&nbsp;</td>
<td>Type Subject </td>
<td>&nbsp;</td>
<td colspan="2"><in put name="textfield " type="text"
class="BodyText ">
<input name="addnewsub " type="submit" class="BodyText "
value="Add"></td>
</tr>

[Elegie]

mantrid wrote:

Can anyone see why this simple script doesnt make the element visible?

You're missing the table tag... Getting the habit of working with valid,
nice, beautiful and even sexy HTML will make your scripting adventure
far more enjoyable than usual - give it a try ;)

[Noah Sussman]

mantrid wrote:

Can anyone see why this simple script doesnt make the element visible?

newsubject.styl e.display='';

Try setting the display property to an explicit value, such as "block"
or "inline."

There is a list of properties for display, here
http://www.w3schools.com/css/pr_class_display.asp

IIRC just unsetting an element's property, as you have done, will cause
the property to be inherited from higher up in the scope chain.

[mantrid]

"Elegie" <el****@invalid .comwrote in message
news:45******** *************** @news.free.fr.. .

mantrid wrote:

Can anyone see why this simple script doesnt make the element visible?

You're missing the table tag... Getting the habit of working with valid,
nice, beautiful and even sexy HTML will make your scripting adventure
far more enjoyable than usual - give it a try ;)

i just left that out as the table is large. just wanted to show the relevant
snippet

[mantrid]

"Noah Sussman" <bl******@gmail .comwrote in message
news:11******** **************@ b28g2000cwb.goo glegroups.com.. .

>
mantrid wrote:

Can anyone see why this simple script doesnt make the element visible?

newsubject.styl e.display='';

Try setting the display property to an explicit value, such as "block"
or "inline."

There is a list of properties for display, here
http://www.w3schools.com/css/pr_class_display.asp

IIRC just unsetting an element's property, as you have done, will cause
the property to be inherited from higher up in the scope chain.

tried block. but unfortunately didnt work

[Elegie]

mantrid wrote:

>>Can anyone see why this simple script doesnt make the element visible?

>You're missing the table tag... Getting the habit of working with valid,
nice, beautiful and even sexy HTML will make your scripting adventure
far more enjoyable than usual - give it a try ;)

i just left that out as the table is large. just wanted to show the relevant
snippet

Yes, but if you just add the <TABLEtag to your posted snippet, then it
works... so the mystery lies elsewhere, in the code you've *not* posted,
and most probably in your HTML structure, I believe.

HTH.

[Michael Winter]

mantrid wrote:

[snip]

Unrelated, but...

<script language="Javas cript">

The language attribute has been deprecated for many years. Use the type
attribute, instead:

<script type="text/javascript">

<!--

The practice of "script hiding" is no longer necessary. Omit the comment
delimiters.

function addnewsub(){
var newsubject = document.getEle mentById('newsu b');
newsubject.styl e.display='';
}

I hope that you normally feature detect before using DOM methods and
object, and that this is just a simplification.

<input name="Submit2" type="button" class="BodyText " onClick="addnew sub()"
value="New">

Keep in mind the value of that onclick attribute, for a moment.

<tr id="newsub" style="display: none;" class="DynamicF orms">

Ideally, you would not hide content using a CSS declaration that you
later intend to show via scripting. Instead, using scripting to both
hide and show the element. That way, if scripting is disabled, the
content is still accessible.

[snip]

<input name="addnewsub " ...>

Notice that this form control has the same name as the function you are
trying to call, above. In some browsers, the form element is added to
the scope chain of form control event listeners. As form elements are
also usually properties of form elements (a mistake, in my opinion),
both these and properties of the form will be exposed. That is, the
identifier, addnewsub, is resolved as the form control with that name,
so "calling" this is a syntax error. Rename your form control or the
function.

Mike

[Michael Winter]

Noah Sussman wrote:

mantrid wrote:

[snip]

>newsubject.sty le.display='';

Try setting the display property to an explicit value, such as "block"
or "inline."

The problem with that suggestion is that the target element is a table
row. In decent browsers, the appropriate display value is 'table-row'.
In lesser ones (like MSIE), the value used is 'block'. The two have
different rendering characteristics , and are not compatible.

There is a list of properties for display, here
http://www.w3schools.com/css/pr_class_display.asp

There is also a list in the various CSS Recommendations , which should be
the primary reference material.

IIRC just unsetting an element's property, as you have done, will cause
the property to be inherited from higher up in the scope chain.

Be careful when using the word "inherit" with CSS: it has a specific
meaning. The correct term here is "the cascade".

You are correct: assigning an empty string to a property of the style
object effectively removes that in-line style declaration. As in-line
styles have the highest specificity, they always take precedence over
other rules in the cascade. Once removed, the most specific rule in the
default, user, or author style sheets will be used instead. In this
instance, this should be fine as the OP has given no indication that
another style sheet rule attempts to hide the element, so removing the
declaration applied via the style attribute would revert to the default
style sheet value.

Mike

[mantrid]

Thanks for the feedback everyone

I changed the function to

function addnewsub(){
document.getEle mentById("newsu b").style.displ ay = '';
}

Simply by not using a variable it now works. If anyone knows why this
happened please let me know


"mantrid" <ia********@vir gin.netwrote in message
news:wZ******** ***********@new sfe4-gui.ntli.net...

Can anyone see why this simple script doesnt make the element visible? It
starts of as hidden but will not show when the button is clicked. This has
worked for me before but I cannot see what is different.

Thanks


<script language="Javas cript">
<!--
function addnewsub(){
var newsubject = document.getEle mentById('newsu b');
newsubject.styl e.display='';
}
//-->
</script>

<input name="Submit2" type="button" class="BodyText " onClick="addnew sub()"
value="New">

here is the relevent code from table

<tr id="newsub" style="display: none;" class="DynamicF orms">
<td>&nbsp;</td>
<td>Type Subject </td>
<td>&nbsp;</td>
<td colspan="2"><in put name="textfield " type="text"
class="BodyText ">
<input name="addnewsub " type="submit" class="BodyText "
value="Add"></td>
</tr>

[ASM]

mantrid a écrit :

Can anyone see why this simple script doesnt make the element visible? It
starts of as hidden but will not show when the button is clicked. This has
worked for me before but I cannot see what is different.

because before you did not start with a display style

Do that :

<script language="Javas cript">
<!--
function addnewsub(){
var newsubject = document.getEle mentById('newsu b').style;
newsubject.disp lay = newsubject.disp lay==''? 'none' : '';
}
onload = addnewsub; // to undisplay your element
//-->
</script>

addnewsub() will switch your table alternatively from display to non display

--
ASM