Changing Text

[evanburen]

I'm trying to text the text inside id="DirectorsCaption" within the
hideDirectors() and showDirectors() functions but it's not working. I'm
trying different variations using .innerHTML but with no luck so far.
Thanks.

<tr>
<td id="DirectorsCaption">ALL CURRENT AND RETIRED
DIRECTORS</td>
</tr>

<tr>
<td>
<input type="button" value="Current directors only"
onclick="hideDirectors();" />
<input type="button" value="All current and retired directors"
onclick="showDirectors();" />
</td>
</tr>
function hideDirectors( ) {
displayDirectors(false);
// document.getElementById("DirectorsCaption").innerH TML = "CURRENT
DIRECTORS";
document.all[DirectorsCaption].innerHTML = "CURRENT DIRECTORS";
}

function showDirectors( ) {
displayDirectors(true);
// document.getElementById("DirectorsCaption").innerH TML = "ALL
CURRENT AND RETIRED DIRECTORS";
document.all[DirectorsCaption].innerHTML = "ALL CURRENT AND RETIRED
DIRECTORS";
}

[Evertjan.]

ev*******@gmail.com wrote on 10 mrt 2006 in comp.lang.javascript:

I'm trying to text the text inside id="DirectorsCaption" within the
hideDirectors() and showDirectors() functions but it's not working. I'm
trying different variations using .innerHTML but with no luck so far.
Thanks.

<tr>
<td id="DirectorsCaption">ALL CURRENT AND RETIRED
DIRECTORS</td>
</tr>

<tr>
<td>
<input type="button" value="Current directors only"
onclick="hideDirectors();" />
<input type="button" value="All current and retired directors"
onclick="showDirectors();" />
Why use buttons that are not doing anything? Only one is usefull at a
time!

</td>
</tr>
function hideDirectors( ) {
displayDirectors(false);
// document.getElementById("DirectorsCaption").innerH TML = "CURRENT
DIRECTORS";
Choose for the more general: getElementById()

document.all[DirectorsCaption].innerHTML = "CURRENT DIRECTORS";
Use css when needing only a specific hyding.
}

function showDirectors( ) {
displayDirectors(true);
// document.getElementById("DirectorsCaption").innerH TML = "ALL
CURRENT AND RETIRED DIRECTORS";
document.all[DirectorsCaption].innerHTML = "ALL CURRENT AND RETIRED
DIRECTORS";
}

Try:

<tr><td>
ALL CURRENT
<span id='Retired'>AND RETIRED</span>
DIRECTORS
</td></tr>

<tr><td>
<input type='button'
value='Current directors only'
onclick='toggleRetired(this);'>
</td></tr>

...............

var Retired = document.getElementById('Retired')

function toggleRetired(x) {
if (x.value=='Current directors only'){
Retired.style.display = 'none';
x.value = 'Retired directors too';
} else {
Retired.style.display = '';
x.value = 'Current directors only';
}
}

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[Randy Webb]

Evertjan. said the following on 3/10/2006 3:12 PM:

<snip>

var Retired = document.getElementById('Retired')

function toggleRetired(x) {
var Retired = document.getElementById('Retired');
if (x.value=='Current directors only'){
Retired.style.display = 'none';
x.value = 'Retired directors too';
} else {
Retired.style.display = '';
x.value = 'Current directors only';
}
}

Firefox: Retired has no properties.
IE6: Line 12 Char 9 Object Expected.

Moving the Retired var declaration to inside the function removes the
errors. You can't set Retired equal to a reference to an element that
doesn't exist yet. Unless the script block is after the table. Move the
declaration, lose the Global variable, put the script block in the head
section with all the rest of the script blocks :)
--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

[evanburen]

Thanks. I agree the one button approach is better but why isn't my code
working? Seems like this should work.

<tr>
<td>span id="DirectorsCaption">ALL CURRENT AND RETIRED
DIRECTORS</span></td>
</tr>

function hideDirectors( ) {
displayDirectors(false);
document.getElementById("DirectorsCaption").innerH TML = "CURRENT
DIRECTORS";
}

function showDirectors( ) {
displayDirectors(true);
document.getElementById("DirectorsCaption").innerH TML = "ALL CURRENT
AND RETIRED DIRECTORS";
}

[Evertjan.]

Randy Webb wrote on 10 mrt 2006 in comp.lang.javascript:

Evertjan. said the following on 3/10/2006 3:12 PM:

<snip>

Not only snipped, you changed the position of my code!

var Retired = document.getElementById('Retired')

function toggleRetired(x) {

var Retired = document.getElementById('Retired');

if (x.value=='Current directors only'){
Retired.style.display = 'none';
x.value = 'Retired directors too';
} else {
Retired.style.display = '';
x.value = 'Current directors only';
}
}

Firefox: Retired has no properties.
IE6: Line 12 Char 9 Object Expected.

Moving the Retired var declaration to inside the function removes the
errors. You can't set Retired equal to a reference to an element that
doesn't exist yet. Unless the script block is after the table. Move the
declaration, lose the Global variable, put the script block in the head
section with all the rest of the script blocks :)

The

var Retired = document.getElementById('Retired')

was set BELOW the html elemnet, If you wnat it in the <head>,
you would have te run it in an <body onload function.

Setting the above inside the function is entirly possible, but not
educational, as repeatedly assichning the same should be discouraged.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[Thomas 'PointedEars' Lahn]

ev*******@gmail.com wrote:

Thanks. I agree the one button approach is better but why isn't my code
working? Seems like this should work.

<tr>
<td>span id="DirectorsCaption">ALL CURRENT AND RETIRED ^[1] DIRECTORS</span></td>
</tr>

function hideDirectors( ) {
displayDirectors(false); ^^^^^^^^^^^^^^^^^^^^^^^^[2] document.getElementById("DirectorsCaption").innerH TML = "CURRENT [3]^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^[4]^^^^^^^^^[5] ^^^^^^^[6] DIRECTORS";
}

function showDirectors( ) {
displayDirectors(true);
document.getElementById("DirectorsCaption").innerH TML = "ALL CURRENT
AND RETIRED DIRECTORS";
}

There can be a number of reasons.

[^1] There is no `span' element, the start tag is missing.
[^2] Something goes wrong in displayDirectors().
[^3] document.getElementById() is not supported.

[^4] document.getElementById() does not return an object reference.
See also [1], and
<URL:http://www.jibbering.com/faq/faq_notes/not_browser_detect.html#bdFD>

[^5] `innerHTML' is not supported.
[^6] Your code is word-wrapped because it exceeds column 80 (or less),
hence there is a syntax error ("unterminated string literal").

<URL:http://jibbering.com/faq/#FAQ4_43>

BTW: Do not uppercase the text, let CSS do this for you
(text-transform:uppercase). And ISTM a `span' element is
not appropriate here either, this looks like a heading.
PointedEars

[Randy Webb]

Thomas 'PointedEars' Lahn said the following on 3/11/2006 5:28 PM:

ev*******@gmail.com wrote:

Thanks. I agree the one button approach is better but why isn't my code
working? Seems like this should work.

<tr>
<td>span id="DirectorsCaption">ALL CURRENT AND RETIRED ^[1]

DIRECTORS</span></td>
</tr>

function hideDirectors( ) {
displayDirectors(false);

^^^^^^^^^^^^^^^^^^^^^^^^[2]

document.getElementById("DirectorsCaption").innerH TML = "CURRENT

[3]^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^[4]^^^^^^^^^[5] ^^^^^^^[6]

DIRECTORS";
}

function showDirectors( ) {
displayDirectors(true);
document.getElementById("DirectorsCaption").innerH TML = "ALL CURRENT
AND RETIRED DIRECTORS";
}

There can be a number of reasons.

[^1] There is no `span' element, the start tag is missing.
[^2] Something goes wrong in displayDirectors().
[^3] document.getElementById() is not supported.

[^4] document.getElementById() does not return an object reference.
See also [1], and
<URL:http://www.jibbering.com/faq/faq_notes/not_browser_detect.html#bdFD>

[^5] `innerHTML' is not supported.
[^6] Your code is word-wrapped because it exceeds column 80 (or less),
hence there is a syntax error ("unterminated string literal").

7) None of the above.
8) The over use of footnotes.
<URL:http://jibbering.com/faq/#FAQ4_43>

BTW: Do not uppercase the text, let CSS do this for you
(text-transform:uppercase).

Nonsense.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

[Thomas 'PointedEars' Lahn]

Randy Webb wrote:

Thomas 'PointedEars' Lahn said the following on 3/11/2006 5:28 PM:

BTW: Do not uppercase the text, let CSS do this for you
(text-transform:uppercase).

Nonsense.

Not everything you do not comprehend is nonsense. Of course
I did not mean not to use any uppercase character.
PointedEars

[Randy Webb]

Thomas 'PointedEars' Lahn said the following on 3/11/2006 7:53 PM:

Randy Webb wrote:

Thomas 'PointedEars' Lahn said the following on 3/11/2006 5:28 PM:

BTW: Do not uppercase the text, let CSS do this for you
(text-transform:uppercase). Nonsense.

Not everything you do not comprehend is nonsense.

You fail to understand that I *do* comprehend it. Very well in fact.
Of course I did not mean not to use any uppercase character.

The nonsense is letting CSS control it. What if CSS is not supported,
disabled, or doesn't support text-transform-uppercase?

CSS is a suggestion and if that suggestion is not followed? The best
course of action with letters and case is to simply type it the way you
want it to appear. Then, it will *always* appear that way.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

[Michael Winter]

On 12/03/2006 05:59, Randy Webb wrote:

[Using CSS to present text in upper case]

The nonsense is letting CSS control it. What if CSS is not supported,
disabled, or doesn't support text-transform-uppercase?
If case is purely presentational, as it was in the OP, then who cares if
CSS is disabled? The text will be shown in title case.

The content is "Current Directors". The desired presentation is "CURRENT
DIRECTORS". It really shouldn't matter which is the rendered result,
especially if that result is consistent.

Clearly, if the /content/ is upper-case ('HTML', for example) then CSS
shouldn't be used in that case.
CSS is a suggestion and if that suggestion is not followed?

The document will render perfectly fine, and it will be just as readable
(arguably more so, in this instance).

[snip]

Mike

--
Michael Winter
Prefix subject with [News] before replying by e-mail.

[Randy Webb]

Michael Winter said the following on 3/12/2006 7:31 AM:

On 12/03/2006 05:59, Randy Webb wrote:

[Using CSS to present text in upper case]

The nonsense is letting CSS control it. What if CSS is not supported,
disabled, or doesn't support text-transform-uppercase?
If case is purely presentational, as it was in the OP, then who cares if
CSS is disabled? The text will be shown in title case.

That's not what Thomas suggested. Thomas suggested something like this:

<span style="text-transform: uppercase">current directors</span>

<span style="text-transform: uppercase">if i want this text uppercased
then it matters</span>

THE ONLY WAY THIS TEXT WONT BE UPPERCASED IS IF THE USER HAS A
STYLESHEET THAT LOWERCASES IT.

User has browser set to ignore all styles in a webpage (IE).
My text appears the way I want it. The CSS transformed text doesn't.

User has a browser that doesn't support text-transform: uppercase.
My text appears the way I want it. The CSS transformed text doesn't.

That list goes on and on. The only one where my text will be altered is
if the user has a stylesheet to set all case to a particular way and
then it won't matter because both of our text will get transformed.

Result? Type it the way you want it, then it appears the way you want it.

That makes using CSS to transform case a nonsense approach other than to
be able to say "I added some extra code to do what I could have done
myself".
The content is "Current Directors". The desired presentation is "CURRENT
DIRECTORS". It really shouldn't matter which is the rendered result,
especially if that result is consistent.
Clearly, if the /content/ is upper-case ('HTML', for example) then CSS
shouldn't be used in that case.

That is precisely what the OP was doing. It was all uppercase, Thomas
said don't do that - use CSS to do it.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/