How to apply condition on document.getElementsByClassName-CodePudding

I continue to discover JavaScript and again I am faced with a small problem

In my order form, I have about 300 items and each item is wrapped by a div, in which there is a class color1

I would like when the quantity is greater than 0 inside my div that my div turns green.

It works great with a div.

But, if I submit the same class for my second item and the quantity of my item is greater than 0, my div does not turn green unless I add for example the color3 class

To better understand, here is the extract of my code where I retrieve the quantity of the article and where I test this quantity, in order to give it the green color if quantity greater than 0.

In summary, what I want is that all the div or the whenitee is greater than 0 green silk.

$('.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 = "green";
    const collection2 = document.getElementsByClassName("couleur2");
    collection2[0].style.backgroundColor = "green";

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


  }
  afficherpanier();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div  style="margin-bottom: 15px; padding-left: 5px; padding-right: 5px;">
  <div >
    <div >
      <h3 >2001</h3>
      <div  style="padding-top: 0;">
        <div >
          <div >
            <select  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"
             onclick="setTimeout(() => ouvreMaJolieAlert(event), 1000);"> ajouter au panier </a>
        </div>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

You should parse value of attribute to number.
var color = Number($(this).attr('data-qte'));
If you want to change <a> parent to color:green; on event onclick and if is set attribute (data-qte > 0) and apply it to multiple divs with class couleur1. Then the simpliest way to do this is to go to that element using event.currentTarget and parentElement

const collection1 = event.currentTarget.parentElement.parentElement.parentElement.parentElement.parentElement

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

full code:

$('.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();
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<div 
    style="margin-bottom: 15px; padding-left: 5px; padding-right: 5px;">
    <div >
      <div >
        <h3 >2001</h3>
        <div  style="padding-top: 0;">
          <div >
            <div >
              <select  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"
              
              onclick="setTimeout(() => ouvreMaJolieAlert(event), 1000);"> ajouter au panier </a>
          </div>
        </div>
      </div>
    </div>
  </div>


  <div 
    style="margin-bottom: 15px; padding-left: 5px; padding-right: 5px;">
    <div >
      <div >
        <h3 >2001</h3>
        <div  style="padding-top: 0;">
          <div >
            <div >
              <select  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"
              
              onclick="setTimeout(() => ouvreMaJolieAlert(event), 1000);"> ajouter au panier </a>
          </div>
        </div>
      </div>
    </div>
  </div>