Javascript - Versuchen, ein Raster zu erstellen, kann aber nur Zeilen erhalten. Ich bin mir nicht sicher, was ich als nächstes tun soll

Question

, also versuche ich eine Etch-a-Skizze zu erstellen und ich muss mehrere divs (d. H. Kleine Quadrate) basierend auf der Benutzereingabe erzeugen. Also zum Beispiel die Option ist, wie viele Pixel soll die Rastergröße von 1 bis 50 sein und basierend auf der Antwort (sagen wir 30) muss ich ein Raster mit so vielen Quadraten auf jeder Seite machen. Das Problem ist, dass ich nur so viele Quadrate als eine Reihe oben und nicht als ein Gitter bekommen kann. Verbunden ist mein Code und auch gezeigt wird mein Javascript-Code, der derjenige ist, der mir Probleme gibt. Die HTML/CSS sind meist nur Styling, aber sie werden in dem Link angezeigt. Ich bin mir nicht sicher, was ich falsch mache, weil ich den Code von jemand anderem als Referenz verwende und es scheint für sie zu funktionieren, aber nicht für mich.

https://codepen.io/faar23/pen/qjZgQY

$(document).ready(function(){ 
/*for (var i = 0; i < 24; i ++) { 
    $('#workspace').append('<div class = "row"></div>'); 
    $('.row').height(27); 
};*/ 
    /*for now i am going to leave the above code commented out but what it 
does is instantly creates 24 boxes on the workspace 
    and without this, the space is empty. I am commenting it out to see if the 
.height function will wor down below...doesnt seem to*/ 

/*the above loop generates 24 divs dynamically without having to copy paste 
in html. the .height sets the height of the divs. 
the width is set in the css under myId. this was done using this tutorial 
https://www.youtube.com/watch?v=dtgx_twX-a4 + inspecting 
the elements on this project https://beachfern.github.io/sketchpad/*/ 

$('#mainButton').mouseenter(function(){ 
    $('#mainButton').addClass('highlight'); 
}); 

$('#mainButton').mouseleave(function(){ 
    $('#mainButton').removeClass('highlight'); 
}); 

/*the above code makes the main start button change color when the mouse 
enters it*/ 

$('.buttonhide').hide(); 

$('#mainButton').click(function(){ 
    $('.buttonhide').show(); 
}); 

/*the above code hides the rest of the buttons until the main button is 
clicked, then all the buttons show themselves*/ 

$('#mainButton').on('click', function(){ 
    var workspaceSize = prompt("How many boxes should make up the canvas? (1 
to 50)", "24"); 
    /*i am going to use this user's way and see if that works better for me 
    https://stackoverflow.com/questions/25518243/creating-div-grid-with- 
jquery-for-loop*/ 
    if(workspaceSize > 0 && workspaceSize <= 50){ 
    $('#workspace').empty(); 
    for (var i = 0; i < workspaceSize; i++){ 
    $('#workspace').append('<div class = "row"></div>'); 
    }; 
    for (var x = 0; x < workspaceSize; x++){ 
    $('.row').append('<div class = "column"></div>'); 
}; 
     $('.row').height(700/workspaceSize); 
     $('.column').height(700/workspaceSize); 
     $('.column').width(700/workspaceSize); 
    }; /*very imp closing bracket. shit doesnt work without it*/ 
}); 

});

Answer 1

Sie müssen die beiden for-Schleifen verschachteln, sodass für jede Zeile die Spalten erstellt werden.

Dies könnte funktionieren, oder Sie in die richtige Richtung führen:

for(var i = 0; i < workspaceSize; i++){ 
    $('#workspace').append('<div class="row" id=row'+i+'></div>'); 
    for(var j = 0; j < workspaceSize; j++){ 
    $('#row'+i).append('<div class="column"></div>') 
    } 
}