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

0

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>`

edited Jun 4, 2011 at 18:11

Ashish Gupta

15.2k21 gold badges81 silver badges136 bronze badges

answered Jun 4, 2011 at 7:46

Bimal Sharma

13415 bronze badges

2 Comments

Bimal Sharma Over a year ago

<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>

Bimal Sharma Over a year ago

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

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related