// Variables globales. IL N'Y A RIEN À AJOUTER.
let gTableau = ['Bilbo', 'Gandhi', 'Frodo', 'Merry', 'Samwise', 'Pippin'] ;


/* TODO 0
*  init() : Déclaration des évènements nécessaires.
*  IL N'Y A RIEN À AJOUTER. À consulter seulement.
*/
function init(){
    // Bouton 1 : Corriger Gandalf
    document.getElementById("bouton1").addEventListener("click", corrigerGandalf);

    // Bouton 2 : Ajouter Baggins
    document.getElementById("bouton2").addEventListener("click", ajouterBaggins);

    // Bouton 3 : Interchanger Merry et Pippin
    document.getElementById("bouton3").addEventListener("click", InterchangerMerryPippin);

    afficherTableau() ;
}


/* TODO 1
*  corrigerGandalf() : Remplace Gandhi par Gandalf et affiche le tableau.
*
*  À faire :
*  1 - Remplacer la valeur "Gandhi" de gTableau par "Gandalf".
*/
function corrigerGandalf(){

    // ECRIRE DU CODE ICI


    // NE PAS TOUCHER À CETTE LIGNE DE CODE :
    afficherTableau() ;
}


/* TODO 2
*  ajouterBaggins() : Ajoute B. à Bilbo et à Frodo et affiche le tableau.
*
*  À faire :
*  1 - Ajouter (concaténer) " B." à la valeur Bilbo de gTableau.
*  2 - Ajouter (concaténer) " B." à la valeur Frodo de gTableau.
*/
function ajouterBaggins(){

    // ECRIRE DU CODE ICI


    // NE PAS TOUCHER À CETTE LIGNE DE CODE :
    afficherTableau() ;
}


/* TODO 3
*  InterchangerMerryPippin() : Interchange Merry et Pippin et affiche le tableau.
*
*  À faire :
*  1 - Créer une variable nommée temp et lui affecter la valeur de la cellule de gTableau qui contient "Merry".
*  2 - Remplacer la valeur de la cellule de gTableau qui contient "Merry"
*       par celle de la cellule de gTableau qui contient "Pippin".
*  3 - Remplacer la valeur de la cellule de gTableau qui contient "Pippin" par celle contenue dans la variable temp.
*
*  ATTENTION : les indices d'un tableau débutent à 0 et non pas à 1.
*/
function InterchangerMerryPippin(){

    // ECRIRE DU CODE ICI


    // NE PAS TOUCHER À CETTE LIGNE DE CODE :
    afficherTableau() ;
}


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

function afficherTableau(){

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

    texte += '<tr><td class="zone" style="color: white; background: black; box-shadow: none;">gTableau</td>';
    for (let j = 0 ; j < gTableau.length ; j++){
        texte += '<td class="zone">' + gTableau[j] + '</td>';
    }
    texte += '</tr>';

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