Comment appliquer un display a l'aide de class

Bonjour

"panel" est une CLASS et non un ID de tes DIV. tu ne dois donc pas utiliser :  getElementById

Interesse toi à la méthode document.querySelectorAll et pour cibler les éléments voulus, ce sont les mêmes selecteurs qu'en CSS.

Par exemple, tu pourrais cibler les  éléments "masqués" ayant la class "panel"

Un selecteur du genre :

.panel[style*=display:none]

Et tu ne gardes que le premier comme tu as fais avec la méthode getByClassNames

Merci jordane 

je viens d'essayer ceci mais cela ne me retourne rien 

 const a = document.querySelectorAll(".panel[style*=display:none]");
 console.log ("display",a)

Merci Jordane pour le code

Cela fonctionne nickel

lorsque je clic sur le bouton qui vient d'apparaitre cela me dirige vers la fonction ajouter au panier 

avec laquelle je fais passer cet argument 

data-qte2="0"

qui va me servir a retirer mon article de mon panier 

ainsi que de supprimer les couleurs de fond 

Mais je butte pour remettre ma class panel en none cette fois-ci

j'essaye avec ce code 

Mais ma class ne veux pas redevenir none

Dans la console aucune erreur

 if (test === "0") {
   console.log("je suis a 0")
   console.log("le nom", $(this).data('nom'))

   //je supprime l'article du panier 
   var nom = $(this).data('nom')
   MonPanier.enlever_produit_de_panier_tous(nom);

   //si le nom de l'article est egal a 77777 ou 88888 ou encore 99999 je retire la couleur de fond
   if (nom == "77777" || nom == "88888" || nom == "99999") {
     const collection12 = event.currentTarget.parentElement.parentElement.parentElement.parentElement
     const h1 = event.currentTarget.parentElement.parentElement.parentElement.previousElementSibling
     collection12.style.backgroundColor = "";
     h1.style.backgroundColor = "";

     //si article different de 77777 ou 88888 ou 99999 alors j'utilise ce code pour enlever la couleur de fond
   } else {
     const collection12 = event.currentTarget.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement
     const h1 = event.currentTarget.parentElement.parentElement.parentElement.previousElementSibling
     console.log(collection12)
     collection12.style.backgroundColor = "";
     h1.style.backgroundColor = "";
   }
    document.querySelectorAll(".panel[style='display:none']");
 
}

j'ai modifie mon code de cette maniere 

Mais ma classe ne redevient toujours pas a none

function myFunction() {   
  var a = document.querySelectorAll(".panel[style*='display:none']");
 console.log ("display",a)
a[0].style.display = ''; 

}

function myFunction2() { 
  var a = document.querySelectorAll(".panel[style*='display:']");
 console.log ("display",a)
a[0].style.display = 'none'; 
}

                <a style="cursor: pointer; margin-bottom: 5px;width: 90%;display: block;margin-left: auto;margin-right: auto;" data-nom="2001" data-prix="1.10" data-qte="1" data-checkbox="2001" data-url="https://phil.pecheperle.be/image-perles/perle-verre-peche-gardon-2001.JPG" class="btn btn-primary ajouter-panier b-items__item__add-to-cart" onclick="setTimeout(() => ouvreMaJolieAlert(event), 1000);myFunction();">
                         ajouter au panier
                       </a>


                       <div class="panel" style="display:none">
                         <a style="cursor: pointer; margin-bottom: 5px;width: 90%;display: block;margin-left: auto;margin-right: auto;" data-nom="2001" data-prix="1.10" data-qte2="0" data-checkbox="2001" data-url="https://phil.pecheperle.be/image-perles/perle-verre-peche-gardon-2001.JPG" class=" ajouter-panier " onclick="myFunction2();">
                           ajouter au panier
                         </a>
                       </div>

Merci pour la reponse Jordane 

Mais j'avais lu cela quelque part que l'on pouvait juste retirer le none pour faire l'effet inverse

bref voici mon nouveau code mais celui ci me retourne une erreur 

Uncaught TypeError: can't access property "style", b[0] is undefined 

Qui m'indique donc que style n'est pas defini

Peut etre le fait que le onclick est declenché dans le div de la classe panel

mon code html

                    <a style="cursor: pointer; margin-bottom: 5px;width: 90%;display: block;margin-left: auto;margin-right: auto;" data-nom="2001" data-prix="1.10" data-qte="1" data-checkbox="2001" data-url="https://phil.pecheperle.be/image-perles/perle-verre-peche-gardon-2001.JPG" class="btn btn-primary ajouter-panier b-items__item__add-to-cart" onclick="setTimeout(() => ouvreMaJolieAlert(event), 1000);myFunction();">
                               ajouter au panier
                             </a>


                             <div class="panel" style="display:none">
                               <a style="cursor: pointer; margin-bottom: 5px;width: 90%;display: block;margin-left: auto;margin-right: auto;" data-nom="2001" data-prix="1.10" data-qte2="0" data-checkbox="2001" data-url="https://phil.pecheperle.be/image-perles/perle-verre-peche-gardon-2001.JPG" class=" ajouter-panier " onclick="myFunction2();">
                                 retirer du panier
                               </a>
                             </div>

function myFunction() {
  var a = document.querySelectorAll(".panel[style*='display:none']");
 console.log ("display",a)
a[0].style.display = 'block'; 
}

function myFunction2() {
  var b = document.querySelectorAll(".panel[style*='display:block']");
 console.log ("display",b)
b[0].style.display = 'none'; 
}

ce code fonctionne super nickel mais agit sur tous les articles 

function myFunction() {
const nodeList = document.querySelectorAll(".panel");
for (let i = 0; i < nodeList.length; i++) {
    nodeList[i].style.visibility=" visible";
}
}

function myFunction2() {
const nodeList = document.querySelectorAll(".panel");
for (let i = 0; i < nodeList.length; i++) {
    nodeList[i].style.visibility=" hidden";
}

}

Je te propose cette fonction

function afficheMasqueDiv(display){
  let laDiv = document.querySelectorAll(".panel[style*='display:"+display+"']");
  console.log ("Liste des div correspondant au style cherché",laDiv);
  if(laDiv.length > 0 ){
    let newDisplay = display == 'none' ? 'block' : 'none' ;
    laDiv[0].style.display = newDisplay; 
  }else{
    console.log("Aucune div avec le display = " + display + " n'a été trouvée !";
  }
}

Que tu peux ensuite utiliser dans tes autres fonctions :

function myFunction() {
   fficheMasqueDiv('none');
}

function myFunction2() {
   afficheMasqueDiv('block');
}

Ou mieux, directement y faire appel à la place de tes deux fonction ( en passant le paramètre souhaité )

par exemple :

<a style="cursor: pointer; margin-bottom: 5px;width: 90%;display: block;margin-left: auto;margin-right: auto;" 
    data-nom="2001" data-prix="1.10" data-qte="1" data-checkbox="2001" 
    data-url="https://phil.pecheperle.be/image-perles/perle-verre-peche-gardon-2001.JPG" 
    class="btn btn-primary ajouter-panier b-items__item__add-to-cart" 
    onclick="setTimeout(() => ouvreMaJolieAlert(event), 1000);afficheMasqueDiv('none');">