Tough Tricky javascript question with array and random funtion

Discussion in 'HTML & JavaScript' started by kikiwho, Mar 31, 2016.

  1. kikiwho

    kikiwho Newbie

    Joined:
    Mar 31, 2016
    Messages:
    2
    Likes Received:
    0
    I got a tricky javascript question relating to random function and arrays, which I have ask around but no one seems to understand or able to solve.


    For testing purpose, a fixed number value is hardcoded to the variable.


    I would like to achieve the following result:
    - 12 black stay fixed on "b" spot
    - Followed by 53 red to be random place within only the 'r' spots on refresh or button click


    ('r' spot is every 3 row, first 15 box)
    - Unfilled 'r' spots + rest of unfilled box fill with lightblue = 19, lime = 34, yellow = 17, pink = 42, green = 102 random position on refresh or button click


    There should be no unfilled box


    jsfiddle net e4rcorzd

    I trying my luck here, see if anyone could help me out.
    Thank you.
     
  2. sockpuppet

    sockpuppet Junior Member

    Joined:
    Nov 7, 2011
    Messages:
    155
    Likes Received:
    145
    • Thanks Thanks x 1
  3. kikiwho

    kikiwho Newbie

    Joined:
    Mar 31, 2016
    Messages:
    2
    Likes Received:
    0
    Just want to thank you for your attempt, really appreciate it, you gave me hope, at least I see something.
    Although this is just examples of playing with colors, i learn array and random function from this.
    Will test it as soon as i rush home.

    If I want to remove 'r' and 'b' text, and based on each color give it a name instead, is it possible?
    Using jsfiddle to test out, click button seem to mess up as after generate 'b' and 'r' text are cleared
    Example - If background color is red , .html('this is red');

    Once again, thank you.
     
  4. LockerWizPro

    LockerWizPro Junior Member

    Joined:
    Aug 10, 2010
    Messages:
    146
    Likes Received:
    211
    I hope this isn't too late.
    Using sockpuppet's jsfiddle I just added
    Code:
    $(this).html('this is red');
    right after
    Code:
    $(this).css('background-color', 'red');
    . It obviously makes all the red boxes much bigger.

    If you would like to detect the background color not in the same function that sets it, it would be:
    Code:
    if (field.css('background-color') === 'rgb(255, 0, 0)') {
    $(field).html('this is red');
    }
    Note that most browsers return an rgb value for the color but it may differ, I think you could find a jQuery plugin that gets them all as the same.