0

I wanna change the background color of the page using the user input. here's my code so far..

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<script type = "text/javascript">
function paintIt(){
    color = prompt("Enter the color you want on the Background???");
    switch (color){
    }
}
</script>
<form>
<input type = "button" value = "Paint Me" onclick ="paintIt()">
</form>
</body>
</html>

and my just simple css

   html {font-family:Arial, Helvetica, sans-serif; colour:#fff;}
            body{background-color:#ccc; margin:0;}

Thanks

Hanlet Escaño
  • 17,114
  • 8
  • 52
  • 75
user3334606
  • 43
  • 1
  • 1
  • 5
  • 5
    Welcome to Stack Overflow first of all! Secondly, this site is mainly designed to help you overcome programming problems when you hit a rough spot and can't get past it. To get high quality answers, be sure to post what you've tried, what result you're currently getting, and what the desired result is. You need to show what you've currently tried, we won't do all the work for you. – snollygolly Feb 20 '14 at 21:03
  • http://jsfiddle.net/5H8ux/1/ – lshettyl Feb 20 '14 at 21:12

5 Answers5

5
function paintIt()
{
    color = prompt("Enter the color you want on the Background???");
    document.body.style.backgroundColor = color;
}

http://jsfiddle.net/5H8ux/

try something like #000000 or #fff.

Hanlet Escaño
  • 17,114
  • 8
  • 52
  • 75
  • there's no color code and yet when I enter any color name it seems to work, how?? – user3334606 Feb 20 '14 at 21:06
  • 1
    JavaScript also does [color names](http://www.w3schools.com/tags/ref_colornames.asp). Any hex value would work, and if you want to be really OCD, you could create a [list of colors](http://stackoverflow.com/questions/1573053/javascript-function-to-convert-color-names-to-hex-codes) to validate that an acceptable color name was entered. If it's a 6 character hex value, it's valid. – StephenH Feb 20 '14 at 21:06
3

Try this:

function paintIt(){
   document.body.style.backgroundColor = "red";
}
2

Try with this

function paintIt(){ 
    color = prompt("Enter the color you want on the Background???"); 
    document.body.style.backgroundColor = color;
}

Js Fiddle Demo

You can try this RGB Color Parser for validating the color names in different format whether they are valid color or not. Here is a demo.

Sachin
  • 40,216
  • 7
  • 90
  • 102
2

A simple example that expects the user to enter a valid background color:

<button id="my-button">Change background</button>
<script>
    document.getElementById("my-button").addEventListener("click", function() {
        document.body.style.backgroundColor = prompt("What color");
    });
</script>

JSFiddle: http://jsfiddle.net/XLL3n/1/

And I have no rep. so I can't comment, but you should really consider reading about css colors to understand possible valid inputs. The library pointed out by @Sachin looks nice.

hert
  • 1,012
  • 8
  • 16
1
<script type = "text/javascript">
function paintIt(){
    color = prompt("Enter the color you want on the Background???");
    switch (color){
        case "red":
            document.body.style.background = color;
        break;
        case "white":
            document.body.style.background = color;
        break;
        default: alert("not a valid color");
   }
}
</script>
Arun Reddy
  • 3,443
  • 1
  • 21
  • 16