11480 sujets

JavaScript, DOM et API Web HTML5

Bonjour a tous
je suis toujours la avec mon panier

il y a encore une chose qui m ennuie un peu

en effet l utilisateur doit choisir la quantité dans un select et ensuite la valider par ajouter dans le panier

dans mon code j'ai un onchange et un onclick
j'ai essaye de mettre ces deux valeurs dans le select mais cela se comporte de façon bizarre

J'ai enlever le onclick et tout ce passe bien ...
Comment je pourrais bien faire pour utiliser le onclick dans mon code
voici le code de départ

 <div class="row mt-12">
	        <div class="col-md-12">
	          <p class="card-text centrer_titre_texte">Perle de 2 mm</p>
	          <div class="centrer_titre_texte">
	            <p> 3 perles identiques</p>
	            <p> 1 euro</p>
	          </div>
	        </div>
	        <div class="row mt-12" style="display: block;margin-left: auto;margin-right: auto;padding-left: 0px;padding-right: 0px;">
	          <div class="col-md-12" style="padding-right: 5px;padding-left: 5px;padding-top: 5px;background-color: #1fdd4e;">
	            <select class="form-select" aria-label="2001" onchange="changeQte(this);" style="padding-top: 0.375rem;  padding-right: 0rem;  padding-bottom: 0.375rem;  padding-left: 0rem; ">
	              <option selected value="1">1 sachet</option>
	              <option value="2">2 sachets</option>
	              <option value="3">3 sachets</option>
	              <option value="4">4 sachets</option>
	              <option value="5">5 sachets</option>
	              <option value="6">6 sachets</option>
	              <option value="7">7 sachets</option>
	              <option value="8">8 sachets</option>
	              <option value="9">9 sachets</option>
	              <option value="10">10 sachets </option>
	        	            </select>
				<p style ="font-size: 1rem;background-color: #1fdd4e;"><strong>dans le panier</strong></p>
	          </div>
	          <div class="row mt-4">
	            <div class="form-check">
	              <input class="form-check-input 2001" type="checkbox" data-nom="Option 1" data-prix="-0.50" id="case_01" checked>
	              <label class="form-check-label" for="case_01"> remise de 50% </label>
	            </div>
	          </div>
	        </div>
	        <div class="col-md-12 text-end">
	          <a style="cursor:pointer;" data-nom="2001" data-prix="1.00" data-qte="1" data-checkbox="2001" class="btn btn-primary ajouter-panier" onclick="ouvreMaJolieAlert(event);">ajouter au panier</a>
	        </div>
	      </div>


voici ce que j'ai fait et qui ne fonctionne pas bien a causs du onclick
<div class="row mt-12">
	        <div class="col-md-12">
	          <p class="card-text centrer_titre_texte">Perle de 2 mm</p>
	          <div class="centrer_titre_texte">
	            <p> 3 perles identiques</p>
	            <p> 1 euro</p>
	          </div>
	        </div>
	        <div class="row mt-12" style="display: block;margin-left: auto;margin-right: auto;padding-left: 0px;padding-right: 0px;">
	          <div class="col-md-12" style="padding-right: 5px;padding-left: 5px;padding-top: 5px;background-color: #1fdd4e;">
	            <select class="form-select btn btn-primary ajouter-panier" aria-label="2001" onchange="changeQte(this);" style="cursor:pointer;" data-nom="2001" data-prix="1.00" data-qte="1" data-checkbox="2001"  onclick="ouvreMaJolieAlert(event);"style="padding-top: 0.375rem;  padding-right: 0rem;  padding-bottom: 0.375rem;  padding-left: 0rem; ">
	              <option selected value="1">1 sachet</option>
	              <option value="2">2 sachets</option>
	              <option value="3">3 sachets</option>
	              <option value="4">4 sachets</option>
	              <option value="5">5 sachets</option>
	              <option value="6">6 sachets</option>
	              <option value="7">7 sachets</option>
	              <option value="8">8 sachets</option>
	              <option value="9">9 sachets</option>
	              <option value="10">10 sachets </option>
	              <option value="11">11 sachets</option>
	              <option value="12">12 sachets</option>
	              <option value="13">13 sachets</option>
	              <option value="14">14 sachets</option>
	              <option value="15">15 sachets</option>
	              <option value="16">16 sachets</option>
	              <option value="17">17 sachets</option>
	              <option value="18">18 sachets</option>
	              <option value="19">19 sachets</option>
	              <option value="20">20 sachets</option>
	            </select>
				<p style ="font-size: 1rem;background-color: #1fdd4e;"><strong>dans le panier</strong></p>
	          </div>
	          <div class="row mt-4">
	            <div class="form-check">
	              <input class="form-check-input 2001" type="checkbox" data-nom="Option 1" data-prix="-0.50" id="case_01" checked>
	              <label class="form-check-label" for="case_01"> remise de 50% </label>
	            </div>
	          </div>
	        </div>
	        <div class="col-md-12 text-end">
 
	        </div>
	      </div>


et le code du onclick

<script type="text/javascript">
    function fermeMaJolieAlert(event) {
  event.target.parentNode.parentNode.remove();
}
 
function ouvreMaJolieAlert(event) {
  let m;
  m = "L'article \"";
  m += event.target.getAttribute("data-nom");
  m += "\" a bien été ajouté au panier";
  function insertAfter(newNode, existingNode) {
    existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
  }
  let e = document.createElement('div');
  let s = "";
  e.classList.add("maJolieAlert");
  s += '<div><p>' + m + '</p>';
  s += '<button type="button" onclick="fermeMaJolieAlert(event)">OK</button></div>';
  e.innerHTML = s;
  insertAfter(e, event.target);
}
             </script>
Salut!

Le onclick s'effectura à l'ouverture à chaque clic sur le select (ouverture etc...)

Généralement, on utilise pas de onclick sur un select.
bonjour
merci pour la réponse
comment je pourrais faire pour afficher un message lorsque l utilisateur a envoyé un article vers le panier
c est bon j'ai fini par trouver
fallait juste que je mette les deux fonctions ensemble dans le onchange
Meilleure solution