Currently, I am in the process of developing a minesweeper game using a combination of HTML, CSS, and JavaScript. The code snippet I am utilizing to generate the grid is as follows:
<div id="game-space"></div>
<script type="text/javascript">
for(i=0; i<40; i=i+20){
var k = 450 + i;
document.getElementById("game-space").style.position = "relative";
document.getElementById("game-space").style.top = "100px";
document.getElementById("game-space").style.left = k + "px";
document.getElementById("game-space").style.backgroundColor = "black";
document.getElementById("game-space").style.display = "block";
}
</script>
My aim is to increment the left margin by 20px with each iteration of the loop to construct a row.
However, I am encountering a challenge whereby, as illustrated in the code snippet, the loop is intended to execute twice, resulting in two black blocks being displayed. Nevertheless, only a single block is displayed at the ultimate loop position.
Could someone provide guidance on how I can maintain the blocks throughout the loop progression?