// Variables globales. IL N'Y A RIEN À AJOUTER.
let gTableauNoms = ['Bilbo', 'Frodo', 'Merry', 'Samwise', 'Pippin', 'Gimli'] ;
let gTableauAges = [129, 51, 37, 39, 29, 140] ;
let gTableauReponses = ['', '', '', '', '', ''] ;


/* TODO 1
*  init() : Déclaration des évènements nécessaires.
*
*   Par exemple, le premier élément de gTableauReponses sera "Bilbo a 129 ans ! "
*   -> Cliquez sur les boutons de questions pour tester si votre code fonctionne.
*
*  À faire :
*   1 - Créer une boucle où l'index prend les valeurs de 0 jusqu'à la taille de gTableauNoms moins un.
*       À chaque itération :
*   2 -     Affecter à la cellule [index] de gTableauReponses la chaîne de caractères "Gandalf a 3000 ans!"
*           mais en remplaçant "Gandalf" par la valeur dans le cellule [index] de gTableauNoms
*           et "3000" par la valeur dans la cellule [index] de gTableauAges. (il faut faire une longue concaténation)
*
*   ATTENTION : il faut utiliser .length
*   ATTENTION : il ne doit y avoir qu'une seule ligne de code dans la boucle.
*/
function init(){

    // ECRIRE DU CODE ICI


    // NE PAS TOUCHER À CES LIGNES DE CODE :
    document.getElementById("bouton1").addEventListener("click", afficherReponse);
    document.getElementById("bouton2").addEventListener("click", afficherReponse);
    document.getElementById("bouton3").addEventListener("click", afficherReponse);
    document.getElementById("bouton4").addEventListener("click", afficherReponse);
    document.getElementById("bouton5").addEventListener("click", afficherReponse);
    document.getElementById("bouton6").addEventListener("click", afficherReponse);
    afficherTableaux() ;
}


// NE PLUS TOUCHER AU CODE À PARTIR D'ICI

function afficherReponse(){
    let i = parseInt(this.getAttribute('i'));
    if (gTableauReponses[i] != ''){
        document.getElementById('reponse' + i).textContent = gTableauReponses[i];
    }
    else{
        document.getElementById('reponse' + i).textContent = 'Je ne sais pas...Gandalf est vieux!';
    }
}

function afficherTableaux(){

    let texte = '<tr><td class="index" style="width: 160px; background: black; box-shadow: none;">index</td>';
    for (let i = 0 ; i < gTableauNoms.length ; i++){
        texte += '<td class="index">' + i + '</td>';
    }
    texte += '</tr>';

    tableaux = [gTableauNoms, gTableauAges];
    tableauxNoms = ['gTableauNoms', 'gTableauAges'];
    for (let i = 0 ; i < 2 ; i++){
        texte += '<tr><td class="zone" style="font-size: 24px; width: 160px; color: white; background: black; box-shadow: none;">' + tableauxNoms[i] + '</td>';
        for (let j = 0 ; j < tableaux[i].length ; j++){
            texte += '<td class="zone">' + tableaux[i][j] + '</td>';
        }
        texte += '</tr>';
    }

    document.getElementById('tableau').innerHTML = texte;
}