Insérer des éléments d'un tableau dans une grille "CSS Grid"

Par Fredo2pz, il y a 4 ans

Les bases HTML/CSS
Javascript

Bonjour, j'envoi une petite bouteille à la mer,
Je suis très novice en Javascript, j'apprend en créant.
Mais la je suis bloqué.
J'ai créer une grille avec CSS Grid

.container { display: grid; grid-template-rows: repeat(3, 90px); grid-template-columns: repeat(14, 90px) ; gap: 10px; margin-top: 50px; background-color: brown; border: 2px solid gold; border-radius: 8px; }

A l'interieur j'ai mis des cellules :

.cellule { background-color: whitesmoke; border-radius: 8px; }

Mon but et de mettre une lettre dans chaques cellules.
Donc en JS je créer un tableau

const hello = ["","","","","B","O","N","J","O","U","R","","","","","","","","","L","A","","","","","","","","","","","","G","R","I","L","L","E","","","","","",""]

j'ai essayer avec ForEach ou autre méthode mais j'arrive toujours pas à l'insérer
enfin ... si mais d'une manière trop débutante, un truc du genre :

grille[1].innerText = text[1] grille[2].innerText = text[2] grille[3].innerText = text[3] grille[4].innerText = text[4] grille[5].innerText = text[5] grille[6].innerText = text[6] ...

Alors j'aimerais savoir si on peut faire plus simple, ou si faut effectivement faire comme ça ?
Merci pour m'avoir lu, et pour vos réponse futur :)

4 réponses

Orivoir21, il y a 4 ans

Bonjour en principe tu devrais pouvoir faire une boucle pour parcourir les éléments de la grille et inséré le texte correspondant via l'index qu'il auront en commun, quelque chose comme:

grille.forEach(function(cellule, index) { cellule[index] = text[index] })

Là où index prendra succéssivement les valeurs: 0, 1, 2, ... et cellule correspond tour à tour à une cellule dans grille.

Fredo2pz, il y a 4 ans

Hello, merci d'avoir répondu ^^
Alors j'ai essayais le problème est que tout me retourne en "indefined" !! Mais je vois un peu la logique je vais faire pas mal de test du coup :)

Fredo2pz, il y a 4 ans

Hello, j'ai réussi à résoudre mon problème avec une boucle for.
J'ai voulu chercher la difficulté je pense :/
je donne le code pour ce que ça interesse.

for (var i = 0; i < 40; i++) { grille[i].innerHTML = text[i] }

Merci encore à ceux qui ont essayé.

Orivoir21, il y a 4 ans

Rebonjour effectivement j'ai oublié que cellule était un élément HTML et j'ai donc oublié d'appélé la méthode innerHTML sur la celule.
J'aurais dut écrire:

cellule[index].innerHTML = text[index]

a la place de:

cellule[index] = text[index]

Au final les deux extrait de codes (la boucle for et la méthode forEach) sont des équivalent et produisent le même résultat.