Hey there, I'm currently working on replicating a 2048 game for a project. Everything seems to be going smoothly except for one thing - the function responsible for creating the board isn't adding any divs to the designated container or anywhere else. Here's the code snippet that should handle this:
document.addEventListener('DOMContentLoader',() => {
const table = document.querySelector(".grid");
const scoreboard = document.getElementById("score");
const resultDisplay = document.getElementById("result");
const width = 4;
function gameBoard(){
let squares = [];
for(let i=0; i < width*width; i++){
square = document.createElement("div");
square.innerHTML = 0;
table.appendChild(square);
squares.push(square);
}
}
gameBoard();
The section in my HTML page that needs to be populated is another div with the class "grid" (I made an error in the original, I meant to say class instead of id, my bad for the confusion). Any assistance on this matter would be highly appreciated.
Additionally, here is the relevant part of my HTML structure:
<html>
<head>
<title>.:>2048<:.</title>
<meta charset="utf8">
<link rel="stylesheet" href="estilos/estilo.css">
<script src="scripts/probas.js" charset="utf-8"></script>
</head>
<body>
<div class="score-container">
<div class="score-annouce">Puntuación</div>
<span id="score">0</span>
</div>
<div id="result"></div>
<div class="grid"></div>
</body>
</html>