changing color by javascript function

Question

In the following code , I have a javascript function and I am tring to change the backgroundColor of the page to a color passed in as a parameter. But my code doesn't work, can anybody help me what is wrong in my code?

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Changing Color</title> <head> <style type="text/css"> body { background-color:#ffcccc; } </style> </head> <body> <form> <label>color: <input type="text" name="color"> </label> <input name="color" type = "button" onClick = "changecolor(color.value) " value = "color"> </form> </body> </html>

Javascript:

function changecolor(colour) { document.bgcolor=colour; }

Frédéric Hamidi · Accepted Answer · 2011-06-04 06:48:29Z

2

Assuming colour contains a valid CSS color descriptor, you can write:

document.body.style.backgroundColor = colour;

answered Jun 4, 2011 at 6:48

Frédéric Hamidi

264k42 gold badges497 silver badges486 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

alia Over a year ago

Hamidi i am still unable to change the background color....my code is <form> <label>color: <input type="text" name="color"> </label> <input name="color" type = "button" onClick = "changecolor(color.value) " value = "color"> </form> function changecolor(colour) { document.body.style.backgroundColor = colour; }

Frédéric Hamidi Over a year ago

@alia, can you give an example of the value you're entering in the color text box? Does the Javascript console show an error when the code in your comment runs?

mightyplow · Accepted Answer · 2011-06-04 07:14:16Z

0

you have to put the function in a script block.

...

</form> <script type="text/javascript> //function declaration </script>

answered Jun 4, 2011 at 7:14

mightyplow

5192 gold badges6 silver badges11 bronze badges

1 Comment

mightyplow Over a year ago

"<form> <label>color: <input type="text" name="color"> </label> <input name="color" type = "button" onClick = "changecolor(color.value) " value = "color"> </form> function changecolor(colour) { document.body.style.backgroundColor = colour; }" so do you try to call the function here? (after the form)

Ashish Gupta · Accepted Answer · 2011-06-04 18:11:41Z

Try this code it works finely man .i have just tried it.you can use it where-ever you want.also appended the code for onmouse click and onmouseover.

<html> <head> <script language="javaScript"> function change_background(color){ document.bgColor = color; } </script> </head> <body> <form> <label>color: <input type="text" name="color" > </label> <input name="clrs" type ="button" value="getcolor" onClick = "change_background(color.value) " > </form> <a href="#" onClick="change_background('#099')">ClickBlue</a> <a href="#" onMouseOver="change_background('#111')">Mouseoverblack</a> <a href="#" onMouseOver="change_background('#fff')">Mouseover white</a> </body> </html>`

<html> <head> <script language="javaScript"> function change_background(color){ document.bgColor = color; } </script> </head> <body> <form> <label>color: <input type="text" name="color" > </label> <input name="clrs" type ="button" value="getcolor" onClick = "change_background(color.value) " > </form> <a href="#" onClick="change_background('#099')">ClickBlue</a> <a href="#" onMouseOver="change_background('#111')">Mouseoverblack</a> <a href="#" onMouseOver="change_background('#fff')">Mouseover white</a> </body> </html>
copy this whole code and try it.i just tried it myself and it is fine

Collectives™ on Stack Overflow

changing color by javascript function

3 Answers 3

2 Comments

1 Comment

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

2 Comments

Related