By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,567 Members | 1,670 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,567 IT Pros & Developers. It's quick & easy.

Simple script does not work

P: n/a
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="Javascript">
<!--
function addnewsub(){
var newsubject = document.getElementById('newsub');
newsubject.style.display='';
}
//-->
</script>

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

here is the relevent code from table

<tr id="newsub" style="display:none;" class="DynamicForms">
<td>&nbsp;</td>
<td>Type Subject </td>
<td>&nbsp;</td>
<td colspan="2"><input name="textfield" type="text"
class="BodyText">
<input name="addnewsub" type="submit" class="BodyText"
value="Add"></td>
</tr>
Sep 25 '06 #1
Share this Question
Share on Google+
12 Replies


P: n/a
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 ;)
Sep 25 '06 #2

P: n/a

mantrid wrote:
Can anyone see why this simple script doesnt make the element visible?
newsubject.style.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.

Sep 25 '06 #3

P: n/a

"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
Sep 25 '06 #4

P: n/a

"Noah Sussman" <bl******@gmail.comwrote in message
news:11**********************@b28g2000cwb.googlegr oups.com...
>
mantrid wrote:
Can anyone see why this simple script doesnt make the element visible?
newsubject.style.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
Sep 25 '06 #5

P: n/a
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.
Sep 25 '06 #6

P: n/a
mantrid wrote:

[snip]

Unrelated, but...
<script language="Javascript">
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.getElementById('newsub');
newsubject.style.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="addnewsub()"
value="New">
Keep in mind the value of that onclick attribute, for a moment.
<tr id="newsub" style="display:none;" class="DynamicForms">
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
Sep 25 '06 #7

P: n/a
Noah Sussman wrote:
mantrid wrote:
[snip]
>newsubject.style.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
Sep 25 '06 #8

P: n/a
Thanks for the feedback everyone

I changed the function to

function addnewsub(){
document.getElementById("newsub").style.display = '';
}

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


"mantrid" <ia********@virgin.netwrote in message
news:wZ*******************@newsfe4-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="Javascript">
<!--
function addnewsub(){
var newsubject = document.getElementById('newsub');
newsubject.style.display='';
}
//-->
</script>

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

here is the relevent code from table

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


Sep 25 '06 #9

P: n/a
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="Javascript">
<!--
function addnewsub(){
var newsubject = document.getElementById('newsub').style;
newsubject.display = newsubject.display==''? 'none' : '';
}
onload = addnewsub; // to undisplay your element
//-->
</script>

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

--
ASM
Sep 25 '06 #10

P: n/a
ASM
mantrid a écrit :
>
tried block. but unfortunately didnt work
It would be possible it could work with IE
but not with FireFox
the element you treat isn't a block it is a row ... (table-row)

the best way is to pass display at 'none' by JavaScript
then to reveal your tr deleting this display

foo.style.display = (foo.style.display=='')? 'none' : '';
http://www.w3.org/TR/REC-CSS2/indexlist.html
http://www.w3.org/TR/REC-CSS2/tables...-def-table-row

--
ASM
Sep 25 '06 #11

P: n/a
ASM said the following on 9/25/2006 7:59 PM:
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
No, read the other responses in this thread. The problem was an element
with the name attribute of "addnewsub" and that causes serious problems
in IE.
Do that :
Don't, as it won't fix the problem :)
<script language="Javascript">
Language is deprecated, use the type attribute.
<!--
Comment delimiters in script blocks are un-needed and can cause harm in
xHTML documents.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Sep 26 '06 #12

P: n/a
Michael Winter wrote:
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.
Thanks for the correction. You made me realize that I haven't worked
on a table-based layout in a while :)
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".
Yes, my answer was too general and brief. If I had taken the time to
write a more accurate post, it's possible that I would have read the OP
more carefully as well, instead of completely missing the actual
problem. Thanks for taking the time to clarify and correct what I said.

Sep 27 '06 #13

This discussion thread is closed

Replies have been disabled for this discussion.