for loop print same hex color as background color

Question

I am trying to generate 5 random hex colors using javascript. I got the output result too. I can able to print the random hex colors in <a></a> element. But, I don't know how to print the same hex color value into background-color..

I have tried so far,

function returnMe() {
 var s = "";
  for(var i = 0; i < 5; i++) {
    s += '<a class="a" href=""><span class="b">#' + (function co(lor){   return (lor +=
  [0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f'][Math.floor(Math.random()*16)])
  && (lor.length == 6) ?  lor : co(lor); })('') + "</span><span class='c' style='background:'></span></a>";
  }
  document.getElementById("clr").innerHTML = s;
}
returnMe();

.a {
   display: inline-block;
    background: #fff;
    border: 1px solid #e2e2e2;
    width: 180px;
    height: 180px;
    margin: 10px;
    text-align: center
}
.b {
   background: #f9f9f9;
    display: inline-block;
    width: 100%;
    padding: 10px 0
}
.c {
   display: inline-block;
    width: 100%;
    height: 141px
}

<div id="clr">
</div>

Is your code confusing / obfuscated on purpose? Why re-define the `co` function within the `for` loop each iteration? — Phil, Jul 31 '19 at 02:34
@Phil https://www.paulirish.com/2009/random-hex-color-code-snippets/ — Karuppiah RK, Jul 31 '19 at 04:21

guijob · Answer 1 · 2019-07-31T02:49:24.713

I think using template literals makes handling ' and " easier. But you just had to add randomized color into background property of second span. But you must created a variable to use randomized color twice.

function returnMe() {
  function getChar(){
    return [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f'][Math.floor(Math.random() * 16)];
  };

  function getColor() {
    let s = '';
    while(s.length < 6) {
      s += getChar();
    }
    return `#${s}`;
  }
 var s = "";
  for(var i = 0; i < 5; i++) {
    const color = getColor()
    s += `<a class="a" href=""><span class="b">${color}</span><span class="c" style="background: ${color}"></span></a>`;
  }
  document.getElementById("clr").innerHTML = s;
}
returnMe();

.a {
   display: inline-block;
    background: #fff;
    border: 1px solid #e2e2e2;
    width: 180px;
    height: 180px;
    margin: 10px;
    text-align: center
}
.b {
   background: #f9f9f9;
    display: inline-block;
    width: 100%;
    padding: 10px 0
}
.c {
   display: inline-block;
    width: 100%;
    height: 141px
}

<div id="clr">
</div>

score 1 · Answer 2 · answered Jul 31 '19 at 02:55

If you need to access the result of a function in both places then you cannot use an IFFE, as the result is immediately returned, extract the function, call it, assign the result to a variable and use the variable where you need.

function returnMe() {
    var s = "";
    function co(lor) {
            return (lor +=
                [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f'][Math.floor(Math.random() * 16)])
                && (lor.length == 6) ? lor : co(lor);
        }

    for (var i = 0; i < 5; i++) {
        var color = co('')
        // you could use template literals here as well
        s += '<a class="a" href=""><span class="b">#' + color + "</span><span class='c' style='background-color:#" + color + "'></span></a>";
    }
    document.getElementById("clr").innerHTML = s;
}
returnMe();

.a {
   display: inline-block;
    background: #fff;
    border: 1px solid #e2e2e2;
    width: 180px;
    height: 180px;
    margin: 10px;
    text-align: center
}
.b {
   background: #f9f9f9;
    display: inline-block;
    width: 100%;
    padding: 10px 0
}
.c {
   display: inline-block;
    width: 100%;
    height: 141px
}

<div id="clr">
</div>

score 1 · Accepted Answer · answered Jul 31 '19 at 03:02

You could clean it up a bit and use the same color for the background color too.

function returnMe() {
  
  var content = "";
  
  for (var i = 0; i < 5; i++) {

    var color = '#' + (function co(lor){   return (lor +=
  [0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f'][Math.floor(Math.random()*16)])
  && (lor.length == 6) ?  lor : co(lor); })('');
    
    content += "<a class='a' href=''>";
    content += "<span class='b'>";
    content += color + "</span>";
    content += "<span class='c' style='background: "+ color +"'></span>";
    content += "</a>";
  
  }
  
  document.getElementById("clr").innerHTML = content;
}

returnMe();

.a {
  display: inline-block;
  background: #fff;
  border: 1px solid #e2e2e2;
  width: 180px;
  height: 180px;
  margin: 10px;
  text-align: center
}

.b {
  background: #f9f9f9;
  display: inline-block;
  width: 100%;
  padding: 10px 0
}

.c {
  display: inline-block;
  width: 100%;
  height: 141px
}

<div id="clr"></div>

score 0 · Answer 4 · answered Jul 31 '19 at 03:17

To do that, you would simply first select the parent div and append the a tag with the background tag set to the random hex color via a for loop.

Let's say your HTML is:

<div id="test">
</div>

You could write something like:

$( document ).ready(function() {
  var colors = generateRandomHexColors(5);
  console.log(colors);
  populateToDOM(colors, "#test");
});

/** 
 * @param int
 * @return array
 */
function generateRandomHexColors(count) {
  var hex_color;
  var colors = []; 
  for (var i = 0; i < count; i++) {
    // from https://stackoverflow.com/a/5092846/4698963
    hex_color = '#'+(Math.random()*0xFFFFFF<<0).toString(16);
    colors.push(hex_color);
  }
  return colors;
}

/** 
 * @param array 
  * @param string
 */
function populateToDOM(colors, e) {
  console.log($(e));
  colors.forEach(function (color) {
    var to_be_added = "<a style='background-color: " +  color + "; height: 300px; width: 300px';> </a>";
    $(e).append(to_be_added);
  });
}

You would need to change the CSS of the a tag to display inline to make the a tags have a width and height:

a {
  display: inline-block;
}

Live Demo

for loop print same hex color as background color

4 Answers4