onclick="element.setAttribute("style",value)"

[johnsuth]

I want to produce a trivial demonstration of dynamic modification.

I thought that pressing a button might change its color.

I studied O'Reillys books and successfully created the button with a fancy
style, but the onclick fails to do anything no matter what permutation of
parameters I try.

<input type=button style=background-color:yellow;color:blue;font-family:Arial;font-style:italic;font-weight:bold name="xyz" value="CHANGE COLOUR" onclick="xyz.setAttribute('style=backgroundColor': cyan);"/>

Can you point me in the right direction?

[web.dev]

jo******@nospam.com.au wrote:

I want to produce a trivial demonstration of dynamic modification.

I thought that pressing a button might change its color.

I studied O'Reillys books and successfully created the button with a fancy
style, but the onclick fails to do anything no matter what permutation of
parameters I try.

<input type=button style=background-color:yellow;color:blue;font-family:Arial;font-style:italic;font-weight:bold name="xyz" value="CHANGE COLOUR" onclick="xyz.setAttribute('style=backgroundColor': cyan);"/>

Can you point me in the right direction?

Hello John,

First fix, place proper quotes around values:

<input type="button" style="background-color:yellow; color: blue;
....etc...">

Second fix, for your onclick handler try the following:

onclick="this.style.backgroundColor = 'cyan';"

[Gérard Talbot]

jo******@nospam.com.au a écrit :

I want to produce a trivial demonstration of dynamic modification.

I thought that pressing a button might change its color.

I studied O'Reillys books and successfully created the button with a fancy
style, but the onclick fails to do anything no matter what permutation of
parameters I try.

<input type=button style=background-color:yellow;color:blue;font-family:Arial;font-style:italic;font-weight:bold name="xyz" value="CHANGE COLOUR" onclick="xyz.setAttribute('style=backgroundColor': cyan);"/>

Can you point me in the right direction?

You should always quote attribute values.
You should give preferences to using id attribute for elements and name
for form input controls. This is for later script access to such
elements. For forms input controls:

document.forms["FormName"].FormInputControlName
will give access to such form input control.

For other elements:

document.getElementById(id_attribute_value)
where id_attribute_value is the string value of the id attribute value.

For more on all this:

http://www.mozilla.org/docs/web-deve...tml#dom_access

Gérard
--
remove blah to email me

[johnsuth]

In <11**********************@g47g2000cwa.googlegroups .com>, "web.dev" <we********@gmail.com> writes:

jo******@nospam.com.au wrote:

I want to produce a trivial demonstration of dynamic modification.

I thought that pressing a button might change its color.

I studied O'Reillys books and successfully created the button with a fancy
style, but the onclick fails to do anything no matter what permutation of
parameters I try.

<input type=button style=background-color:yellow;color:blue;font-family:Arial;font-style:italic;font-weight:bold name="xyz" value="CHANGE COLOUR" onclick="xyz.setAttribute('style=backgroundColor': cyan);"/>

Can you point me in the right direction?

Hello John,

First fix, place proper quotes around values:

<input type="button" style="background-color:yellow; color: blue;
....etc...">

Second fix, for your onclick handler try the following:

onclick="this.style.backgroundColor = 'cyan';"

It works; many thanks.

[johnsuth]

In <3t************@uni-berlin.de>, =?ISO-8859-1?Q?G=E9rard_Talbot?= <ne***********@gtalbot.org> writes:

jo******@nospam.com.au a écrit :

I want to produce a trivial demonstration of dynamic modification.

I thought that pressing a button might change its color.

I studied O'Reillys books and successfully created the button with a fancy
style, but the onclick fails to do anything no matter what permutation of
parameters I try.

<input type=button style=background-color:yellow;color:blue;font-family:Arial;font-style:italic;font-weight:bold name="xyz" value="CHANGE COLOUR" onclick="xyz.setAttribute('style=backgroundColor': cyan);"/>

Can you point me in the right direction?

You should always quote attribute values.
You should give preferences to using id attribute for elements and name
for form input controls. This is for later script access to such
elements. For forms input controls:

document.forms["FormName"].FormInputControlName
will give access to such form input control.

For other elements:

document.getElementById(id_attribute_value)
where id_attribute_value is the string value of the id attribute value.

For more on all this:

http://www.mozilla.org/docs/web-deve...tml#dom_access

Merci Gérard for your pointers. I employed them to enhance my trivial
forms code demonstration (which has to be independent of web and mail servers)
but my javascript code (which works) is not identical to any of the samples I
read.

Does my code look OK or does it contain deprecated items?

<form name="f1">
Select colour
<INPUT TYPE="RADIO" NAME="radioSet" VALUE="Yellow">Yellow
<INPUT TYPE="RADIO" NAME="radioSet" VALUE="Cyan">Cyan
<INPUT TYPE="reset" VALUE="RESET" /><Br>
<input type=button style=background-color:magenta;color:blue;font-family:Arial;font-style:italic;font-weight:bold value="CHANGE COLOUR" onclick="if (document.forms['f1'].radioSet[0].checked){this.style.backgroundColor = 'yellow'} else if (document.forms['f1'].radioSet[1].checked){this.style.backgroundColor = 'cyan'} else {this.style.backgroundColor = 'magenta'};"/><Br>
</form>

[Gérard Talbot]

jo******@nospam.com.au a écrit :

In <3t************@uni-berlin.de>, =?ISO-8859-1?Q?G=E9rard_Talbot?= <ne***********@gtalbot.org> writes:

jo******@nospam.com.au a écrit :

I want to produce a trivial demonstration of dynamic modification.

I thought that pressing a button might change its color.

I studied O'Reillys books and successfully created the button with a fancy
style, but the onclick fails to do anything no matter what permutation of
parameters I try.

<input type=button style=background-color:yellow;color:blue;font-family:Arial;font-style:italic;font-weight:bold name="xyz" value="CHANGE COLOUR" onclick="xyz.setAttribute('style=backgroundColor': cyan);"/>

Can you point me in the right direction?

You should always quote attribute values.
You should give preferences to using id attribute for elements and name
for form input controls. This is for later script access to such
elements. For forms input controls:

document.forms["FormName"].FormInputControlName
will give access to such form input control.

For other elements:

document.getElementById(id_attribute_value)
where id_attribute_value is the string value of the id attribute value.

For more on all this:

http://www.mozilla.org/docs/web-deve...tml#dom_access

Merci Gérard for your pointers.

Also:

Mozilla Web Author FAQ
http://www.mozilla.org/docs/web-developer/faq.html

Migrate apps from Internet Explorer to Mozilla
http://developer.mozilla.org/en/docs...rer_to_Mozilla

I employed them to enhance my trivial forms code demonstration (which has to be independent of web and mail servers)
but my javascript code (which works) is not identical to any of the samples I
read.

Does my code look OK or does it contain deprecated items?

<form name="f1">
No action attribute... which is mandatory
Select colour
<INPUT TYPE="RADIO" NAME="radioSet" VALUE="Yellow">Yellow
<INPUT TYPE="RADIO" NAME="radioSet" VALUE="Cyan">Cyan
If you're not submitting name/value pairs to a server, then you don't
need to define the value attribute.
<INPUT TYPE="reset" VALUE="RESET" /><Br>
<input type=button style=background-color:magenta;color:blue;font-family:Arial;font-style:italic;font-weight:bold value="CHANGE COLOUR" onclick="if (document.forms['f1'].radioSet[0].checked){this.style.backgroundColor = 'yellow'} else if (document.forms['f1'].radioSet[1].checked){this.style.backgroundColor = 'cyan'} else {this.style.backgroundColor = 'magenta'};"/><Br>
1- type and style attribute values are not quoted.
2- magenta and cyan are not reserved color keywords in CSS 2.1. aqua
replaces cyan; fuchsia replaces magenta
http://www.w3.org/TR/CSS21/syndata.html#color-units
3- Regarding
else {this.style.backgroundColor = 'magenta'}
The button has already a background-color of magenta. So why repeat that
instruction if the other 2 radio buttons are not checked?
4- Your code should be either clearly XHTML based or HTML based: so
either you should add "/" in end tags for <input> and <br> or you should
not.
</form>

<form action="" name="f1">
<p>Select colour
<input type="radio" name="radioSet">Yellow
<input type="radio" name="radioSet">Cyan (or aqua)
<input type="reset" value="RESET"><br>
<input type="button" style="background-color: fuchsia; color: blue;
font-family: Arial, sans-serif; font-style: italic; font-weight: bold;"
value="CHANGE COLOUR" onclick="if
(document.forms['f1'].radioSet[0].checked){this.style.backgroundColor =
'yellow';} else if
(document.forms['f1'].radioSet[1].checked){this.style.backgroundColor =
'aqua';};"></p>
</form>

Gérard
--
remove blah to email me