Réinitianliser tableau   
   
  Trier le tableau   
   
  tableau vide 
  
  

table.matable{
margin : 20px auto;}
tr.maligne > td {
width:80px;
height:80px;
text-align:center;
background-color:red;}

td.changer{
background-color:#ff00ee;
color:red;}
#Ecrire{
margin-left:770px;
margin-top:50px;
color:#0000ee;}
.lebouton{
background-color:LightBlue;
width:140px;
height:40px;}
#boutons{
margin-left:39%;}

// afficher des lettres de l alphabet dans la table html
function afficher(){
for (let i = 0 ; i < cases.length;i++){
cases[i].textContent = alphabet[i];}}

function vider(){
for (let i=0 ; i < cases.length;i++){
cases[i].textContent='';}}
 
 /* Trier les elements d'un tableau(tri selection)*/
 function trier(){

for(j=0 ; j < cases.length ; j++){
        min=alphabet[j]
        for(i=j ; i < cases.length ; i++){
            if (alphabet[i] < min ) {
                min=alphabet[i];
                temp=alphabet[i];
                alphabet[i]=alphabet[j];
                alphabet[j]=temp;}
        }
    }
}
// la fonction shuffle melange les elements d'un tableau   
function shuffle(array) {
  array.sort(() => Math.random() - 0.5);
}

var alphabet=['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p',
    'q','r','s','t','u','v','w','x','y','z'];

// La fonction shuffle mélange les éléments du tableau 'alphabet' de manière aléatoire
shuffle(alphabet);

// on cible toutes les cellules du tableau de la classe "lettre"
var cases=document.getElementsByClassName("lettre") ;

let bouton1 = document.getElementById('bouton1');
let bouton2 = document.getElementById('bouton2');
let bouton3 = document.getElementById('bouton3');

bouton1.addEventListener('click' , function() {
  trier(); afficher();
});

bouton2.addEventListener('click' , function() {
 shuffle(alphabet) ; afficher();
});

bouton3.addEventListener('click' , function() {
 vider() ;
});
window.addEventListener('load',afficher,false);