Как сделать настоящую рекурсию в этом случае?

Question

Так я хочу, чтобы программа JS, чтобы сделать мне макет так:

<div class="collection"> 
    <div class="color"></div> 
    <div class="color"></div> 
    <div class="color"></div> 
</div> 

, что я уже сделал это за

var collections = [ 
    { collection: ["#000", "#222", "#333"] } 
] 
function saveColors(){ 
    var collection = []; 
    var colorBlocks = document.getElementsByClassName("colored"), 
     colSpace = document.getElementById("collection-space"), 
     firstColor = document.getElementById("first"); 

    var color1 = colorBlocks[0].textContent, 
     color2 = colorBlocks[1].textContent, 
     color3 = colorBlocks[2].textContent; 

    if(firstColor.dataset.first != "true"){ 
    collections.push({collection: [color1, color2, color3]}); 
    console.log(collections); 
    var collectionBlock = document.createElement('div'); 
    collectionBlock.className = "collection"; 
    var color = document.createElement('div'); 
    color.className = "color"; 

    for(i=0;i<collections.length;i++){ 
     colSpace.appendChild(collectionBlock); 
     for(x=0;x<collections[i].collection.length;x++){ 
     var collection = document.getElementsByClassName("collection"); 
     collection[i].appendChild(color); 
     } 
    } 

    } 
} 

JSFiddle: https://jsfiddle.net/jzheh2cf/
Так что есть вещь, которую вы должны знать. Поэтому у меня есть случайный генератор цвета, и он генерирует случайные цвета для 3 блоков в моем макете HTML. И это не главное, это просто информация. Я просто хочу объяснить, что в этих первых строках кода я создаю объект/массив коллекций. Затем я беру innerHTML моих цветовых блоков, чем содержащий шестнадцатеричный цветовой код. Затем я занимаю место, где должен быть размещен этот макет (colSpace = document.geti("collection-space")). И когда я создаю макет, я хочу иметь 3 цвета в одной коллекции, как в примере, но я всегда получаю только один. Что мне нужно изменить в collection[i].appendChild(color) или где-нибудь еще?

Answer 1

Okey, я уже решил проблему. Я переписал всю вещь for. Так что, если вы парень, который ищет ответ, вот мой последний JS код:

var collections = [ 
    { collection: ["#000", "#222", "#333"] } 
] 
function saveColors(){ 
    var colorBlocks = document.getElementsByClassName("colored"), 
     colSpace = document.getElementById("collection-space"), 
     firstColor = document.getElementById("first"); 

    var color1 = colorBlocks[0].textContent, 
     color2 = colorBlocks[1].textContent, 
     color3 = colorBlocks[2].textContent; 

    if(firstColor.dataset.first != "true"){ 
    collections.push({collection: [color1, color2, color3]}); 
    console.log(collections); 

    var collectionBlock = document.createElement('div'); 
    collectionBlock.className = "collection"; 

    var color = document.createElement('div'); 
    color.className = "color"; 
    color.setAttribute("onclick", "displayCopyPaste(this)"); 

    var color2 = document.createElement('div'); 
    color2.className = "color"; 
    color2.setAttribute("onclick", "displayCopyPaste(this)"); 

    var color3 = document.createElement('div'); 
    color3.className = "color"; 
    color3.setAttribute("onclick", "displayCopyPaste(this)"); 

    for(i=0; i < collections.length; i++){ 
     colSpace.appendChild(collectionBlock); 
     //cN = colorName 
     for(cN = 0; cN < collections[i].collection.length; cN++){ 
     color.innerHTML = collections[i].collection[0]; 
     color.style.backgroundColor = collections[i].collection[0]; 

     color2.innerHTML = collections[i].collection[1]; 
     color2.style.backgroundColor = collections[i].collection[1]; 

     color3.innerHTML = collections[i].collection[2]; 
     color3.style.backgroundColor = collections[i].collection[2]; 
     } 
     collectionBlock.appendChild(color); 
     collectionBlock.appendChild(color2); 
     collectionBlock.appendChild(color3); 
    } 
    } 
} 

Здесь вы идете, ребята.