Bonjour a vous,

Je suis nouveau dans le groupe et j'ai un petit problème avec mon code ci dessous. En fait le problème est que j'ai des checkbox que je récupère leurs valeurs avec une boucle et je les stock dans un tableau puis je les format lorsque je click sur le bouton valider mais le souci est que ce code n'a marche qu'une seul fois si je fais une nouvelle action on me dira que liste.push is not a function après il faut réactualiser la page pour que ça marche a nouveau et dans le projet que je veut l'intégrer on ne devra pas actualisé la page 

Je sais pas où se trouve le problème raison pour laquel je me remet a vous.

Merci d'avance.

//HTML

 <input type="checkbox" value="banane" class="checkbox">banane<br>

 <input type="checkbox" value="tomate" class="checkbox">tomate<br>

 <input type="checkbox" value="haricots" class="checkbox">haricots<br>

<button class="valider">Valider</button>

//Javascript

// je crée mon tableau

liste = [];

// Je récupère l'élément checkbox

var items = document.querySelectorAll(".checkbox");

// Je parcours mes checkboxs

for(var item of items){

// J'effectue un click sur chaque checkbox

item.addEventListener("click", function(){

// Je vérifie si le checkbox a été sélectionné

 if(this.chexked == true){

// J'ajoute da valeur dans ma liste

   liste.push(this.value);

 }Elise{

// Dans le cas contraire je retire sa valeur

   liste = liste.filter(e => e !== this.value);

}

});

}

// Jquery code de validation

$(".valider").click(function (){

// Je formaté mon tableau

  liste = liste.toString();

// J'affiche le resultat

  console.log(liste);

// Je vide mon tableau

 liste.splice(0,liste.length);

  console.log(liste);

});