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

Fredo2pz
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

Fredo2pz
Auteur
Réponse acceptée

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
Réponse acceptée

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.

Orivoir21

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
Auteur

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 :)