changing the style of a <td>

[Nick Wedd]

I have an html page with some javascript that outputs text to a <td>
element. This works. Here is the element:

<td rowspan=2 valign=top id="out" class=op bgColor="white"></td>

I want to let the user change the appearance of this text, so I have
provided some buttons:

<tr><td>
Output colour:
</td><td>
<input type=radio name=c checked
onclick="document.getElementById('out').bgColor = 'yellow';">yellow
<input type=radio name=c
onclick="document.getElementById('out').bgColor = 'blue';">blue
</td></tr>
<tr><td>
Output size:
</td><td>
<input type=radio name=s checked
onclick="document.getElementById('out').style.font-size =
'large';">large
<input type=radio name=s
onclick="document.getElementById('out').style.font-size =
'small';">small
</td></tr>
<tr><td>
Output font:
</td><td>
<input type=radio name=f checked
onclick="document.getElementById('out').style.fontFamily =
'serif';">serif
<input type=radio name=f
onclick="document.getElementById('out').style.font.fontFamily =
'sans-serif';">sans-serif
</td></tr>

Clicking on the "yellow" button changes the background of
the <td> to yellow.
Clicking on the "blue" button changes the background of
the <td> to blue.
Clicking on the "large" button does nothing.
Clicking on the "small" button does nothing.
Clicking on the "serif" button changes the text to a serif font.
Clicking on the "sans-serif" button does nothing.

Obviously I am doing something wrong. It seems likely that I am
making a simple and obvious mistake. But I can't think why three
of these buttons do what I intended, while three do nothing. Can
anyone please help?

Nick

 

[Martin Honnen]

<input type=radio name=s checked
onclick="document.getElementById('out').style.font-size = 'large';">large
<input type=radio name=s
onclick="document.getElementById('out').style.font-size = 'small';">small
</td></tr>

The CSS property name is 'font-size' but in the Javascript DOM the
property is named 'fontSize' e.g.
document.getElementById('out').style.fontSize = 'large';
as '-' is not allowed in Javascript identifiers.

 

[Nick Wedd]

The CSS property name is 'font-size' but in the Javascript DOM the
property is named 'fontSize' e.g.
document.getElementById('out').style.fontSize = 'large';
as '-' is not allowed in Javascript identifiers.

Thank you for such a prompt and helpful answer!

Nick

 

[Doug Miller]

I have an html page with some javascript that outputs text to a <td>
element. This works. Here is the element:

<td rowspan=2 valign=top id="out" class=op bgColor="white"></td>

I want to let the user change the appearance of this text, so I have
provided some buttons:

Most visitors to your page would probably appreciate it if you provided
buttons to reset the attributes to their default values.

<tr><td>
Output colour:
</td><td>
<input type=radio name=c checked

Why mark this as checked? (Same question for the other buttons, too.) The
background doesn't become yellow until that's clicked anyway.

onclick="document.getElementById('out').bgColor = 'yellow';">yellow
<input type=radio name=c
onclick="document.getElementById('out').bgColor = 'blue';">blue
</td></tr>
<tr><td>
Output size:
</td><td>
<input type=radio name=s checked
onclick="document.getElementById('out').style.font-size =
'large';">large
<input type=radio name=s
onclick="document.getElementById('out').style.font-size =
'small';">small
</td></tr>
<tr><td>
Output font:
</td><td>
<input type=radio name=f checked
onclick="document.getElementById('out').style.fontFamily =
'serif';">serif
<input type=radio name=f
onclick="document.getElementById('out').style.font.fontFamily =
'sans-serif';">sans-serif>
</td></tr>

Clicking on the "yellow" button changes the background of
the <td> to yellow.
Clicking on the "blue" button changes the background of
the <td> to blue.
Clicking on the "large" button does nothing.
Clicking on the "small" button does nothing.
Clicking on the "serif" button changes the text to a serif font.

Only if the browser default is a sans-serif font...

Clicking on the "sans-serif" button does nothing.

Obviously I am doing something wrong. It seems likely that I am
making a simple and obvious mistake. But I can't think why three
of these buttons do what I intended, while three do nothing. Can
anyone please help?

Because three of them assign values to valid properties, and three of them
assign values to properties that do not exist.

style.fontSize='large'
style.fontSize='small'
style.fontFamily='sans-serif'