Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Sep 2011
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Randomly generated colors

    Alright so for a school assignment I need to create a button with the name of the color it is going to turn the background to.
    the assignment says nothing about naming the buttons the hex numbers for the color therefore:

    I was curious if someone could show me how to create a button in java script that would generate a random hex number for a color ie: #+()+()+()+()+()+()
    and the text shown on the button would be the same as the hex number generated.

    feed back please

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,550
    Thanks
    78
    Thanked 4,382 Times in 4,347 Posts
    Well, no. We don't do homework. (It's a rule of this forum. See rule 1.6 here: http://www.codingforums.com/rules.htm )

    But since you are going beyond the original assignment, if you show me your code that works with *named* colors, then I'll show you how to generate the random hex color number.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New Coder
    Join Date
    Sep 2011
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    nono I can understand that I know how to do the assignment
    and I've completed it, its a beginner course but I've never touched on javascript so I would like to go above and beyond the assignment, its more for furthering myself and I'm not going to lie I want to wow the teacher haha xP
    I don't copy and paste so do any method of showing me you would like
    but this is what I have down its just simple stuff

    Code:
    <html>
    
    <head>
    
    <title>New Page 1</title>
    
    
    <script language="Javascript">
    
    function newcolor(aColor)
    {
    document.bgColor=aColor;
    }
    </script>
    
    </head>
    
    <body>
    
    <div align="left">
    <form>
    		<input type="button" value="RED"
    	onclick="newcolor('red');">
    </form>
    </div>
    
    </body>
    
    </html>

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,550
    Thanks
    78
    Thanked 4,382 Times in 4,347 Posts
    Happiness. You did all I asked for.

    So:

    Generating the hex number is easy:
    Code:
    function genHexColor()
    {
        var color = "#";
        for ( var n = 1; n <= 6; ++n )
        {
            color += ( Math.floor( 16 * Math.random() ) ).toString(16);
        }
    }
    How it works:

    Math.random() returns a number that is >= 0 and < 1.0000
    Multiply that by 16 and you get a number than is >= 0 and < 16.0000 (so <= 15.9999999999)
    Take the "floor" of that and you essentially chop off everything after the decimal point,
    So now you have an integer from 0 to 15.
    toString(16) says "convert that number to a string in base 16 notation". In other words, convert it to hex.

    So we just pick a random hex digit 6 times and the result will be something like #37A0F8 or whatever.

    ************

    NOW comes the tricky part... Using that as both the text of the button *and* the argument to the function.

    Turns out, that's easier than you think.

    Code:
    <script type="text/javascript">
    document.write('<input type="button" value="' + genHexColor() + '" onclick="newcolor(\'this.value\');"/>');
    </script>
    See it? Let js create the entire button for you. And then rather than have to duplicate the hex color, just get the value *of* the button and pass it to your onclick function.

    You'll have a button that looks something like
    Code:
    <input type="button" value="#7381AF" onclick="newcolor('this.value');"/>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,550
    Thanks
    78
    Thanked 4,382 Times in 4,347 Posts
    Another way to do this, that the "purists" would like better.
    Code:
    <html>
    <head>
    <title>New Page 1</title>
    <script type="text/javascript">
    function initialize( )
    {
        var form = document.forms[0];
        var color = "#";
        for ( var n = 1; n <= 6; ++n )
        {
            color += ( Math.floor( 16 * Math.random() ) ).toString(16);
        }
        form.colorPicker.value = color;
        form.colorPicker.onclick = 
            function() { document.body.style.backgroundColor = this.value; };
    }
    window.onload = initialize;
    </script>
    </head>
    <body>
    <div align="left">
    <form>
        <input name="colorPicker" type="button" value="" />
    </form>
    </div>
    </body>
    </html>
    Note that <script language="javascript"> is obsolete. See what I used, instead.
    Note that the bgColor attribute is obsolete, too.
    Last edited by Old Pedant; 09-28-2011 at 04:14 AM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,550
    Thanks
    78
    Thanked 4,382 Times in 4,347 Posts
    And just for fun...one more variant:
    Code:
    <html>
    <head>
    <title>New Page 1</title>
    <script type="text/javascript">
    function initialize( )
    {
        var form = document.forms[0];
        var buttons = form.getElementsByTagName("input");
        for ( var b = 0; b < buttons.length; ++b )
        {
            var button = buttons[b];
            var color = "#";
            for ( var n = 1; n <= 6; ++n )
            {
                color += ( Math.floor( 16 * Math.random() ) ).toString(16);
            }
            button.value = color;
            button.onclick = 
                function() { document.body.style.backgroundColor = this.value; };
        }
    }
    window.onload = initialize;
    </script>
    </head>
    <body>
    <div align="left">
    <form>
        <input type="button" value="" />
        <input type="button" value="" />
        <input type="button" value="" />
        <input type="button" value="" />
        <input type="button" value="" />
        <input type="button" value="" />
        <input type="button" value="" />
    </form>
    </div>
    </body>
    </html>
    Last edited by Old Pedant; 09-28-2011 at 04:14 AM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    New Coder
    Join Date
    Sep 2011
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    wow it surprises me its that simple
    and thank you for the math.floor tid bit I've been using math.round
    I really appreciate your help!

    now I'm just going to try and have fun with this
    could you show me how to add an onclick function that would create another button with the same properties as the original except a different hex number?

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,550
    Thanks
    78
    Thanked 4,382 Times in 4,347 Posts
    Quote Originally Posted by the6ness View Post
    could you show me how to add an onclick function that would create another button with the same properties as the original except a different hex number?
    Don't want much, do you? <grin/>
    Code:
    <html>
    <head>
    <title>New Page 1</title>
    <script type="text/javascript">
    function genHexColor()
    {
        var color = "#";
        for ( var n = 1; n <= 6; ++n )
        {
            color += ( Math.floor( 16 * Math.random() ) ).toString(16);
        }
        return color;
    }
    function buttonFun(btn)
    {
        document.body.style.backgroundColor = btn.value;
    
        var newbtn = document.createElement("input");
        newbtn.type = "button";
        newbtn.value = genHexColor();
        newbtn.onclick = function() { buttonFun(this); };
        document.forms[0].appendChild(newbtn);
    }
    function initialize( )
    {
        var button = document.forms[0].b1;
        button.value = genHexColor();
        button.onclick = function() { buttonFun(this); };
    }
    window.onload = initialize;
    </script>
    </head>
    <body>
    <form>
        <input name="b1" type="button" value="" />
    </form>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    New Coder
    Join Date
    Sep 2011
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Don't want much, do you? <grin/>
    Code:
    <html>
    <head>
    <title>New Page 1</title>
    <script type="text/javascript">
    function genHexColor()
    {
        var color = "#";
        for ( var n = 1; n <= 6; ++n )
        {
            color += ( Math.floor( 16 * Math.random() ) ).toString(16);
        }
        return color;
    }
    function buttonFun(btn)
    {
        document.body.style.backgroundColor = btn.value;
    
        var newbtn = document.createElement("input");
        newbtn.type = "button";
        newbtn.value = genHexColor();
        newbtn.onclick = function() { buttonFun(this); };
        document.forms[0].appendChild(newbtn);
    }
    function initialize( )
    {
        var button = document.forms[0].b1;
        button.value = genHexColor();
        button.onclick = function() { buttonFun(this); };
    }
    window.onload = initialize;
    </script>
    </head>
    <body>
    <form>
        <input name="b1" type="button" value="" />
    </form>
    </body>
    </html>
    :O...... I'm a newbie when it comes to java take pity on me oh god xP

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,550
    Thanks
    78
    Thanked 4,382 Times in 4,347 Posts
    Quote Originally Posted by the6ness View Post
    and thank you for the math.floor tid bit I've been using math.round
    Math.round will give either bogus results or wrong results.

    If you used
    Code:
        Math.round( 16 * Math.random() )
    then you will end up with numbers for 0 to 16!!! (Because 15.5 and above rounds to 16.)

    And when you try to convert 16 to hex, you get "10", of course.

    On the other hand, if you used
    Code:
        Math.round( 15 * Math.random() )
    you will get numbers from 0 to 15, true, but they will be incorrectly distributed.

    Specifically, 0 and 15 will appear only half as often as 1 through 14.

    That's because only 0 through 0.49999 rounds to 0, and only 14.5 through 14.99999 rounds to 15. A range of 0.5 units in each case. Whereas, for example, 2.50000 through 3.49999 rounds to 3, a range of 1 full unit.

    It's just algebra. <grin/>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,550
    Thanks
    78
    Thanked 4,382 Times in 4,347 Posts
    :O...... I'm a newbie when it comes to java
    Ummm...I think you mean you are a newbie when it comes to javaSCRIPT?

    Java is an entirely different (and much harder) language. About the only thing they have in common are the first 4 letters of their names.


    *********

    And hey, you asked!
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #12
    New Coder
    Join Date
    Sep 2011
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Ummm...I think you mean you are a newbie when it comes to javaSCRIPT?
    I could have sworn I put script my bad haha xP thanks again!


  •  

    Posting Permissions

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