[Résolu] Comment appliquer une condition sur document.getElementsByCla

Bonjour a tous

Bonjour a tous

je continue a découvrir JavaScript et de nouveau je suis confronte a un petit soucis

Dans mon bon de commande j'ai +- 300 articles et chaque article est enveloppé par une div

dans lequel il y a une class couleur1

je souhaiterais que lorsque la quantité est plus grande que 0 dans l'intérieur de ma div que ma div devienne verte

cela fonctionne super nickel avec une div

Mais si je remet la même classe pour mon deuxième article et que la quantité de mon article est plus grand que 0

Ma div ne passe pas verte sauf si j'ajoute par exemple la classe couleur3

Pour mieux comprendre

voici l'extrait de mon code ou je récupère la quantité de l'article et ou je teste cette quantité , afin de lui donner la couleur verte si quantité pus grand que 0

$('.ajouter-panier').click(function(event) {
	event.preventDefault();
	var nom_option = "";
	var prix_option = 0;
	var url = $(this).data('url');
	var option_checkbox = $(this).data('checkbox');
	if (option_checkbox != "") {
		var checkboxes = document.getElementsByClassName(option_checkbox);
		for (var i = 0; i < checkboxes.length; i++) {
			if (checkboxes[i].checked == true) {
				var nom_option = nom_option + " (" + $(checkboxes[i]).data('nom') + ")";
				var prix_option = prix_option + Number($(checkboxes[i]).data('prix'));
			}
		}
	}
	if ($(this).data('select')) {
		var nom = $(this).data('nom') + " (" + document.getElementById("" + $(this).data('select') + "").value + ")" + nom_option;
	} else var nom = $(this).data('nom');
	var prix = Number($(this).data('prix')) + (prix_option);
	if ($(this).attr('data-qte')) {
		var qte_option = $(this).attr('data-qte');
		MonPanier.ajouter_produit_dans_panier(nom, prix, qte_option, url);
	} else MonPanier.ajouter_produit_dans_panier(nom, prix, 1, url);
	var color = $(this).attr('data-qte');
	console.log(color);
	if (color > 0) {
		const collection1 = document.getElementsByClassName("couleur1");
		collection1[0].style.backgroundColor = "#9bdf49";
		const collection2 = document.getElementsByClassName("couleur2");
		collection2[0].style.backgroundColor = "#9bdf49";

	} else {
		const collection1 = document.getElementsByClassName("couleur1");
		collection1[0].style.backgroundColor = "";
		const collection2 = document.getElementsByClassName("couleur2");
		collection2[0].style.backgroundColor = "";


	}
	afficherpanier();
});

et un extrait du html

<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 couleur1" style="margin-bottom: 15px; padding-left: 5px; padding-right: 5px;">
  <div class="card">
    <div class="">
      <h3 class="card-title centrer_titre_texte couleur2">2001</h3>
      <div class="card-body stylecardbody" style="padding-top: 0;">
        <div class="row mt-12">             
          <div class="col-md-12">
            <select class="form-select styleselect" aria-label="2001" onchange="changeQte(this);">
              <option selected value="1.10">1 sachet </option>
              <option value="2">2 sachets</option>
              <option value="3">3 sachets </option>    
            </select>
          </div>
          <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);"> ajouter au panier </a>      
        </div>       
      </div>
    </div>
  </div>
</div>

Bonjour,

Dans le code, tu récupères la liste de tous les éléments de la page ayant pour classe couleur1 (puis ceux pour classe couleur2), mais tu ne remplaces que la couleur du premier élément de la liste.

C'est probablement pour ça que ton code marche pour une div, mais pas pour deux divs, sauf si tu ajoutes une classe spécifique couleur3 à la 2e div (car alors elle sera le premier élément de la liste des éléments ayant la classe couleur3).

Il faudrait faire un code un peu plus sophistiqué pour bien ciblé l'article voulu (une possibilité me semble être de rechercher dans les éléments parents de $(this) qui est un bouton-lien semble-t-il (ce qui est une mauvaise pratique selon moi) celui qui a la classe couleur appropriée et changer la couleur de cet élément si toutefois j'ai bien compris quel élément devait changer de couleur, parce que je n'ai pas très bien compris le pourquoi du comment de la présence de couleur1 et couleur2 dans le code).

Amicalement,
Modifié par parsimonhi (11 Oct 2022 - 17:09)

bonjour
Merci pour vos réponses et vos explications

voici l'extrait de code qui fonctionne
Pour ce qui est de la couleur 1 et 2 je pensais faire deux couleurs differentes

Mais voici la solution

$('.ajouter-panier').click(function (event) {
      event.preventDefault();
      var nom_option = "";
      var prix_option = 0;
      var url = $(this).data('url');
      var option_checkbox = $(this).data('checkbox');
      if (option_checkbox != "") {
        var checkboxes = document.getElementsByClassName(option_checkbox);
        for (var i = 0; i < checkboxes.length; i++) {
          if (checkboxes[i].checked == true) {
            var nom_option = nom_option + " (" + $(checkboxes[i]).data('nom') + ")";
            var prix_option = prix_option + Number($(checkboxes[i]).data('prix'));
          }
        }
      }
      if ($(this).data('select')) {
        var nom = $(this).data('nom') + " (" + document.getElementById("" + $(this).data('select') + "").value + ")" + nom_option;
      } else var nom = $(this).data('nom');
      var prix = Number($(this).data('prix')) + (prix_option);
      if ($(this).attr('data-qte')) {
        var qte_option = $(this).attr('data-qte');
      } else MonPanier.ajouter_produit_dans_panier(nom, prix, 1, url);
      var color = Number($(this).attr('data-qte'));
      
       const collection1 = event.currentTarget.parentElement.parentElement.parentElement.parentElement.parentElement
       const h1  = event.currentTarget.parentElement.parentElement.previousElementSibling
     

      if (color > 0) {
        collection1.style.backgroundColor = "green";
        h1.style.color = "green";
      } else {
        collection1.style.backgroundColor = "";
        h1.style.color = "";
      }
      afficherpanier();
    });