www.webdeveloper.com
Results 1 to 5 of 5

Thread: Background Color Input

  1. #1
    Join Date
    Jul 2012
    Posts
    16

    Background Color Input

    Trying to write something where, after you have entered in a hex color, and clicked the "change color" button, it changes your background color to 'x' hex color.

    Thanks, i'm a noob!

    <html>
    <head>
    <title>This is a test-site</title>
    <script type="JavaScript">
    function colorchange()
    {
    document.bgColor = color;
    }
    </script>
    </head>
    <body bgcolor="#708090">
    <form align="center">
    HEX Color: <input type="test" name="color" id="color" value="" />
    </form>
    <button type="button" onclick="javascript:colorchange('')">Change Color</button>
    </body>

  2. #2
    Join Date
    May 2004
    Location
    chennai, tamil nadu, India
    Posts
    437
    Try

    Code:
    <script type="text/javaScript">
    and also find a way for passing the input value (color) to the function.
    Chris, Senior Developer,
    www.Chrisranjana.com

  3. #3
    Join Date
    Jul 2012
    Posts
    16

    yes...

    I originally had <text/javascript> and it didn't work. I have been trying to figure how to connect the input value to "color". I suppose I should have made myself more clear by asking how to do that directly.

    Thank you!

  4. #4
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>...</title>
    <style type="text/css">
    body{text-align:center;font-family:Verdana,Arial;font-size:11px;background-color:#000;color:#fff;padding:0px;margin:300px 0px 0px 0px;}
    b{font-size:16px;font-style:italic;}
    input{margin-left:15px;}
    #bgcol{text-align:center;font-style:italic;}
    </style>
    <script type="text/javascript">
    var path=/^([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/g;
    function col(obj){
    var val=obj.value;
    if(path.test(val)){document.body.style.backgroundColor='#'+val;}
    }
    
    window.onload=function(){document.getElementById('bgcol').onkeyup=function(){col(this);}}
    </script>
    </head>
    <body>
    <b>#</b><input type="text" id="bgcol" size="25" maxlength="6" />
    </body>
    </html>
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  5. #5
    Join Date
    Jul 2012
    Posts
    16

    but...

    Is there a way with the code I provided? A way to connect the value entered to the executed function? An explanation would be great.

    thank you!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles