Menu
In this JSBIN demo, you will see the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script>
function createPallet(){
R = Array('00', '33', '66', '99', 'CC', 'FF');
G = Array('00', '33', '66', '99', 'CC', 'FF');
B = Array('00', '33', '66', '99', 'CC', 'FF');
pallet = [];
j = 0;
for (x = 0; x < R.length; x++){
for (y = 0; y < G.length; y++){
for (z = 0; z < B.length; z++){
pallet[j] = "#"+R[x]+G[y]+B[z];
j++;
}
pallet[j] = "#"+R[x]+G[y]+B[z];
j++;
}
pallet[j] = "#"+R[x]+G[y]+B[z];
j++;
}
return pallet;
}
</script>
</head>
<body>
<select style="width: 150px">
<script>
pallet = createPallet();
alert("Number of colors: "+pallet.length)
for (i = 0; i < pallet.length; i++){
document.write("<option style='background-color:"+pallet[i]+"' title='"+pallet[i]+"'> </option>");
}
</script>
</select>
</body>
</html>
I have got 258 colors, However there are repeated undefined blue values B in the list shown in white option's title. I believe that it is because something wrong in the nested loops, I could not able to figure out it. Another thing, I expect it to return 256 colors not 258! How could I solve this issue?
554
I think only the inner-most loop needs the push:
for (x = 0; x < R.length; x++){
for (y = 0; y < G.length; y++){
for (z = 0; z < B.length; z++){
pallet[j] = "#"+R[x]+G[y]+B[z];
j++;
}
}
}
OR
for (x = 0; x < R.length; x++){
for (y = 0; y < G.length; y++){
for (z = 0; z < B.length; z++){
pallet.push("#"+R[x]+G[y]+B[z]);
}
}
}
The count should be 216. 6*6*6 = 216. The undefined values were in there because the loop variable, z for instance, gets incremented the last time it exits the loop. So after the loop was complete, you were referencing the variable at which point the value would be 1 more than the length of the array, resulting in the undefined value.
update To clarify
for (x = 0; x < R.length; x++){
for (y = 0; y < G.length; y++){
for (z = 0; z < B.length; z++){
pallet[j] = "#"+R[x]+G[y]+B[z];
j++;
}
//remove ==> pallet[j] = "#"+R[x]+G[y]+B[z];
//remove ==> j++;
}
//remove ==> pallet[j] = "#"+R[x]+G[y]+B[z];
//remove ==> j++;
}
This is much cleaner when done with JavaScript's array object's forEach method.
Use this as your createPallet function instead:
function createPallet(){
var R = Array('00', '33', '66', '99', 'CC', 'FF');
var G = Array('00', '33', '66', '99', 'CC', 'FF');
var B = Array('00', '33', '66', '99', 'CC', 'FF');
var pallet = [];
R.forEach(function(r) {
G.forEach(function(g) {
B.forEach(function(b) {
pallet.push("#"+r+g+b);
});
});
});
return pallet;
}
Also note that this correctly returns an array of 216 colours not 256 because you have 6 elements in the R, G and B arrays and 6 * 6 * 6 == 216. See: http://www.helensimages.com/hexcolor.htm
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
