473,378 Members | 1,467 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,378 software developers and data experts.

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


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?

Nov 10 '05 #1
5 17649

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';"

Nov 11 '05 #2
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
Nov 23 '05 #3
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.

Nov 23 '05 #4
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>


Nov 23 '05 #5
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
Nov 23 '05 #6

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

8
by: Andy Fish | last post by:
Hi, I have a section of a web page that I want to be able to make appear and disappear with javascript, with the things below it moving up and down as appropriate. I'm not using absolute...
3
by: davidkarlsson74 | last post by:
Error: document.getElementById("folderMenu").cells has no properties File: http://www.volkswagen.se/tillbehor/js/foldermenu.js Rad: 49 The function activates different DIV:s, but doesn't seem to...
2
by: forwardtrends | last post by:
I am trying to simply make a div appear and dis-appear. The code I am using is: --- if(!document.getElementById) { document.getElementById = function() {return null;}; } function...
37
by: Jan Wagner | last post by:
Hi, can't figure this one out, what's the CSS way to specify the language? In HTML it would be simply an lang="xx" attribute, or XHTML xml:lang="xx", but, how about in CSS? This would be...
5
by: balakrishnan.dinesh | last post by:
hi Frnds, I need Confirm box with "yes" or "no" buttons, Is that possible in JAVASCRIPT , Can anyone tell me the solution for this or anyother way to create confirm box with "yes" or "no" button?...
6
by: newholborn | last post by:
Hi everyone. I have some questions, which should be rather easy to reply, but as I am working on PHP, JavaScript, XML, CSS, Photoshop and other stuff at the same time, my head, which is about to...
1
by: luispunchy | last post by:
I have an accordion style dropdown list/sublist menu (functions similar to the "today on WebMD video" widget found on http://www.webmd.com/) - it will allow users to click on a headline (from the...
3
by: matwilko | last post by:
hi, i am trying to create a simple version of itunes...and i am using iframes to do this. I have already set up the iframes using dreamweaver and used a drop-down menu to select the genre. When...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.