Petit soucis de débutant avec une condition

Bonjour

Tu sembles déjà détenir la réponse...

Il faut que ton code JavaScript soit chargé après ton HTML et/ou ne s'exécute qu'une fois la page totalement chargée.

https://stackoverflow.com/questions/9899372/vanilla-javascript-equivalent-of-jquerys-ready-how-to-call-a-function-whe

Donc.. il semble que tu essaies de remplir un élément html ayant pour id  "remise_10"

Quand on regarde ton code html .. tu n'as rien avec cet ID ... 

Tu as confondu le contenu et l'id de l'élément

<p id="nouveau_prix_promo"></p>remise_10<br>
<p id="message_remise_10"></p>prix normal<br>

Visiblement, le bon ID à utiliser dans ton JS c'est : nouveau_prix_promo

bonsoir jordane 

Merci pour la réponse et le lien 

Pourtant c'est bien ce qui se passe mon appel a ma page panier.js se fait bien après le code en html

voici le code du panier jordane 

Mais je ne vois pas ou cela bloque puisque je ne suis pas dans une fonction 

J'ai place ce code juste avant la fermeture de la condition globale pour le mode de livraison

// Mon petit panier version 1.0
// Antoine, https://www.1formatik.com

//Configuration

// Faut-il imposer un nombre de produits commandés minimum ?
// 0 pour désactiver les commandes par lot
// 1 pour activer la fonctionnalité de commande par lot
var Qte_Minimum = 1;

// Si la fonction est activé, quel est le nombre de produits minimum
var Qte_Minimum_Valeur = 6;

// Livraison
// 0 pour désactiver un coût supplémentaire lié à la livraison
// 1 pour activer la fonctionnalité de modification du prix total pour inclure le prix de la livraison selon un pourcentage du prix total
// 2 pour activer la fonctionnalité de modification du prix total pour inclure le prix de la livraison selon un forfait fixe
// 3 pour activer la fonctionnalité de choix du transporteur avec prix différents selon le choix
// Si vous activez l'option 3, pensez à supprimer la portion de code HTML correspondant aux modes de livraison
//var Livraison = 3;

// Si oprion 1, % du prix total total correspondant au prix de la livraison
//var Poucentage_Livraison = 25;

// Si option 2, forfait de la livraison en euro
//var Forfait_Livraison = 19;

// 3 pour activer la fonctionnalité de choix du transporteur avec prix différents selon le choix
//IMPORTANT LORSQUE JE CHOISIS 1 LES REMISES NE SONT PAS PRISES EN COMPTE
//choisir 2 ou 3
var Livraison = 2;

// % du prix total total correspondant au prix de la livraison
var Poucentage_Livraison_opposse = 0.25;
var Poucentage_Livraison = 0.75;
var Poucentage_Livraison_affichee = 25;
var prix_vide_modal = 0;

var promotion_pourcentage = 90;
var promotion_pourcentage_inverse = 10;

//console.log(Poucentage_Livraison_affichee );

// Forfait de la livraison en euro
//var Forfait_Livraison = 1;

// Les messages concernant la fonctionnalité de commande par lot
var txt_qte_minimum_bad = "<font color='red'>Attention les quantités ne sont pas corrects, les commandes se font par lot de " + Qte_Minimum_Valeur + " produits minimum</font>";
var txt_qte_minimum_ok = "<font color='green'>Le nombre de produits est correct</font>";
var txt_qte_minimum_defaut = "Les commandes se font par lot de " + Qte_Minimum_Valeur + " produits";

// Comment affiche-t-on les prix du panier et du total
// Pour rappel, les prix des produits sont à modifier via les attributs HTML data-prix dans le fichier index.php
// 0 pour aficher aucune décimale : 19 euros
// 2 pour afficher deux décimales : 19.00 euros
var decimal = 2;

// Ne pas modifier la suite sauf si vous désirez modifier le code
var MonPanier = (function() {
	panier = [];

	function Item(nom, prix, quantite, url) {
		this.nom = nom;
		this.prix = prix;
		this.quantite = quantite;
		this.url = url;
		//console.log(url);
	}

	function savepanier() {
		sessionStorage.setItem('MonPanier', JSON.stringify(panier));
		//	console.log(setItem);
		//	console.log(JSON.stringify(panier));
		//console.log(('MonPanier', JSON.stringify(panier)));
		//console.log(sessionStorage.setItem('MonPanier', JSON.stringify(panier)));
	}

	function loadpanier() {
		panier = JSON.parse(sessionStorage.getItem('MonPanier'));
	}

	if (sessionStorage.getItem("MonPanier") != null) {
		loadpanier();
	}

	var obj = {};

	obj.ajouter_produit_dans_panier = function(nom, prix, quantite, url) {
		for (var item in panier) {
			if (panier[item].nom === nom) {
				if (quantite) {
					panier[item].quantite = Number(quantite);
				} else {
					panier[item].quantite++;
				}
				savepanier();
				return;

			}
		}
		
		var item = new Item(nom, prix, quantite, url);
		//console.log(quantite);
		panier.push(item);
		savepanier();
	}

	obj.setquantiteForItem = function(nom, quantite) {
		for (var i in panier) {
			if (panier[i].nom === nom) {
				panier[i].quantite = quantite;
				break;
			}
		}
	};

	obj.enlever_produit_de_panier = function(nom) {
		for (var item in panier) {
			if (panier[item].nom === nom) {
				panier[item].quantite--;
				if (panier[item].quantite === 0) {
					panier.splice(item, 1);
				}
				break;
			}
		}
		savepanier();
	}

	obj.enlever_produit_de_panier_tous = function(nom) {
		for (var item in panier) {
			if (panier[item].nom === nom) {
				panier.splice(item, 1);
				break;
			}
		}
		savepanier();
	}

	obj.clearpanier = function() {
		panier = [];
		savepanier();
	}

	obj.totalquantite = function() {
		var totalquantite = 0;
		for (var item in panier) {
			totalquantite += Number(panier[item].quantite);
		}
		return Number(totalquantite);
	}
	//prix total panier
	obj.totalpanier = function() {
		var totalpanier = 0;
		for (var item in panier) {
			totalpanier += panier[item].prix * panier[item].quantite;
		}
		return Number(totalpanier.toFixed(decimal));
	}

	obj.listpanier = function() {
		var panierCopy = [];
		for (i in panier) {
			item = panier[i];
			itemCopy = {};
			for (p in item) {
				itemCopy[p] = item[p];
			}
			itemCopy.total = Number(item.prix * item.quantite).toFixed(decimal);
			panierCopy.push(itemCopy)
		}
		return panierCopy;
	}

	return obj;
})();

function changeQte(element) {
	var qte = element.value;
	var t = $(element);
	var label = t.attr("aria-label");
	$("[data-nom='" + label + "']").attr('data-qte', qte);
}

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

$('.clear-panier').click(function() {
	MonPanier.clearpanier();
	afficherpanier();
});

$('.choix_livraison').click(function() {
	const cases = document.querySelectorAll('input[name="choix_livraison"]');
	for (const x of cases) {
		if (x.checked) {
			afficherpanier();
		}
	}
});

//debut fonction panier
function afficherpanier() {

	//on prepare les lignes qui vont ecevoirles articles 
	var panierArray = MonPanier.listpanier();
	var output = "";
	var countart = 0;
	var countart2 = 0;
	var count = 0;
	for (var i in panierArray) {
		output += "<div class='row' style='border-style: ridge;  border-width: 1px; border-color: #8ebf42; background-color: #d9d9d9;margin-bottom:5px;'>" +
			"<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'><button class='btn btn-danger effacer-item' data-nom='" + panierArray[i].nom + "'>X</button></div>" +
			"<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'>" + " <a class='example-image-link' href='" + panierArray[i].url + "'data-lightbox='example-set'><img src="""  style='width:100px;height:100px;'></a>" + "</div>" +
			"<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'>" + panierArray[i].nom + "</div>" +
			"<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'>" + panierArray[i].prix.toFixed(0) + "  euro</div>" +
			"<div class='form-inline col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'><div class='input-group'><button class='btn btn-primary moins-item' data-nom='" + panierArray[i].nom + "'>-</button>" +
			"<input type='number' min='1' class='form-control item-quantite' style='width:55px !important' data-nom='" + panierArray[i].nom + "' value='" + panierArray[i].quantite + "'>" +
			"<button class='btn btn-primary plus-item' data-nom='" + panierArray[i].nom + "'>+</button></div></div>" +
			"<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'>" + panierArray[i].total + " euros</div>" +
			"</div>";
		count++;
		countart += panierArray[i].quantite; // somme des unités d'articles
		countart2 = countart
		//console.log(panierArray[i].quantite );
		//console.log(countart );
		//console.log(panierArray[i].quantite );
	}
	$('.show-panier').html(output);

	//on commence le choix des livraisons
	//on se contentera du choix 3 si on applique une ristourne et du choix 2 sans ristourne

	//mode de livraison sans remise
	if (Livraison == 2) {

		//*************************************************************************************
		//on commence par récupérer des informations lorsque on clic sur un choix de livraison**** 
		//on crée également des variables grâce au mode de livraison
		//****************************************************************************************
		const cases = document.querySelectorAll('input[name="choix_livraison"]');
		for (const x of cases) { //debut const x of cases
			if (x.checked) {
				//si une case est cochee on recupere 2 variables
				var nom_choix_livraison = x.dataset.nom;
				var prix_choix_livraison = x.value;
				//on definit le prix total et la livraison 
				var prix_et_livraison = (((MonPanier.totalpanier()))) + Number(prix_choix_livraison);
				break;
			}
		}

		//on cree le total du panier 
		$('.total-panier').html(prix_et_livraison.toFixed(decimal));

		//pour afficher le detail de la livraison 
		document.getElementById('livraison-detail').innerHTML = "(" + nom_choix_livraison + ")" + prix_choix_livraison + " euro(s)";

		//different elements a afficher en html

		document.getElementById('nouveau_prix_total_haut').innerHTML = ((((MonPanier.totalpanier())))).toFixed(2);

		//on definit juste le total du panier 
		let test = MonPanier.totalpanier();

		//pour afficher sur le code php ces deux valeurs 
		document.getElementById("prix_depart_haut").innerHTML = MonPanier.totalpanier();
		document.getElementById("prix_depart").innerHTML = MonPanier.totalpanier();


		//on recupere le id du bouton radio pour le code promo 
		//grace a cette condition si on ne choisit pas de code promo alors les calucls se font normalement 

		//debut controla bouton radio
		document.querySelectorAll("input").forEach(item => {
			item.addEventListener("change", () => {
				//console.log(item.id)
				if (item.id == "vert") {

					document.getElementById('amount').value = prix_et_livraison;
					if (test == 0) {
						document.getElementById('nouveau_prix_total_modal').innerHTML = "<div class='col' style=''><span style='color: #050013;'> Dès réception du paiement de </span><br>" + ((((MonPanier.totalpanier()))) + Number(prix_choix_livraison)).toFixed(2) + " <span style='color: #050013;'>euro(s)<br>Votre commande vous sera envoyée.<br>Choississez un mode de paiement.</span> </div>";
						document.getElementById('afficher_message_remerciement_commande').innerHTML = "Votre commande n'a pas été enregistrée";
						document.getElementById('container').style.display = "none";
					} else {
						document.getElementById('nouveau_prix_total_modal').innerHTML = "<div class='col' style=''><span style='color: #050013;'> Dès réception du paiement de </span><br>" + ((((MonPanier.totalpanier()))) + Number(prix_choix_livraison)).toFixed(2) + " <span style='color: #050013;'>euro(s)<br>Votre commande vous sera envoyée.<br>Choississez un mode de paiement.</span> </div>";
						document.getElementById('afficher_message_remerciement_commande').innerHTML = "Merci pour votre commandeazerty <br>Elle a bien été enregistrée";
						document.getElementById('container').style.display = "block";
					}

				} // fin de if item.id == "vert"
			}) //fin de item.addEventListener("change", () =>
		}) //fin de document.querySelectorAll("input").forEach(item => 

		//debut code promo en recuperant le nom

		//debut pour afficher le name via le input
		var form = document.getElementById("forms");
		form.onclick = function(e) {
			e.preventDefault();
			var name = document.getElementById("name").value;
			console.log(name);

			//*********************************************************************************************************
			//debut teste en plus de savoir si le code promo est azerty si il y a quelque chose dans le panier***********
			//*********************************************************************************************************
			if (name == 'azerty') {

				//on definit des variable pour afficher dans les documents getElementById
				let promo = ((((MonPanier.totalpanier()) * (promotion_pourcentage / 100)) + (Number(prix_choix_livraison))));
				let code_promo = 10
				let prix_promo_hors_transport = (MonPanier.totalpanier() * (promotion_pourcentage / 100)).toFixed(2);
				let prix_promo_avec_transport = ((MonPanier.totalpanier() * (promotion_pourcentage / 100)) + Number(prix_choix_livraison)).toFixed(2);

				//ici est defini le prix a afficher dans paypal
				document.getElementById('amount').value = ((MonPanier.totalpanier() * (promotion_pourcentage / 100)) + Number(prix_choix_livraison)).toFixed(2);

				//ici on envois sur index.php le prix total pour le comparer 
				document.getElementById("nouveau_prix_promo").innerHTML = prix_et_livraison;

				//message que l'on va afficher avec le recapitilatif
				document.getElementById("print").innerHTML = "<div class='container' style ='font-size: 20px;font-weight: bold;'> <div class='row'><div class='col'style='text-align:right;background-color: #78b8df;text-align: center;'>Votre code est bon</div></div><div class='row'><div class='col'>Vous avez un coupon de <span style ='color: red;'>" + code_promo + "</span> % </div> </div><div class='row'><div class='col'>votre ancien prix etait de  <span style ='color: red;'>" + prix_et_livraison + " </span>euros</div> </div><div class='row'><div class='col'>Le nouveau prix est de <span style ='color: red;'>" + prix_promo_hors_transport + " </span>euros </div></div><div class='row'><div class='col'>Les frais des livraisons sont de <span style ='color: red;'>" + Number(prix_choix_livraison) + "</span> euros</div></div><div class='row'><div class='col'>Le nouveau montant a payer frais de livraison inclus <span style ='color: red;'>" + prix_promo_avec_transport + " </span> euros  </div></div></div></div>";

				//on teste en plus de savoir si il y a quelque chose dans le panier c'est ce qui sera affiche dans la console de paypal
				if (test == 0) {
					document.getElementById('nouveau_prix_total_modal').innerHTML = "<div class='col' style=''><span style='color: #050013;'> Votre panier est vide  <br> ou<br>Votre commande a déjà été envoyée.<br>Verifiez votre boite mail (spams inclus)</span> <br><a href='https://phil.pecheperle.be' class='btn btn-primary ' role='button' aria-disabled='true'>abandon de commande </a> <br> <br>  <a href='https://phil.pecheperle.be/panier/index270422.php' class='btn btn-primary ' role='button' aria-disabled='true'>Relancer la commnande </a></div>";
					document.getElementById('afficher_message_remerciement_commande').innerHTML = "Votre commande n'a pas été enregistrée";
					document.getElementById('container').style.display = "none";
				} else {
					document.getElementById('nouveau_prix_total_modal').innerHTML = "<div class='col' style=''><span style='color: #050013;'> Dès réception du paiement de </span><br>" + promo.toFixed(2) + " <span style='color: #050013;'>euro(s)<br>Votre commande vous sera envoyée.<br>Choississez un mode de paiementeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee.</span> </div>";
					document.getElementById('afficher_message_remerciement_commande').innerHTML = "Merci pour votre commande <br>Elle a bien été enregistrée";
					document.getElementById('container').style.display = "block";
				}
			}
			//*********************************************************************************************************
			//fin teste en plus de savoir si le code promo est azerty si il y a quelque chose dans le panier***********
			//*********************************************************************************************************

			//*********************************************************************************************************
			//debut teste savoir si le code promo est vides on affiche juste un message***********
			//*********************************************************************************************************
			else if (name == '') {
				document.getElementById("print").innerHTML = "<div class='col'style='text-align:right;background-color: #78b8df; font-size: 20px;text-align: center;'>Vous devez entrer un code  </div>";
			}
			//*********************************************************************************************************
			//fin teste savoir si le code promo est vides on affiche juste un message***********
			//*********************************************************************************************************

			//***********************************************************************************************************************
			//debut teste en plus de savoir si le code promo est diffèrent de azerty si il y a quelque chose dans le panier***********
			//***********************************************************************************************************************
			else if (name != 'azerty') {
				//console.log("le code n'est pas bon ");
				document.getElementById("print").innerHTML = "<div class='col' style='text-align:right;background-color: #78b8df; font-size: 20px; text-align: center;'> votre code est mauvais </div>";


				//on teste en plus de savoir si le code promo est azerty si il y a quelque chose dans le panier 
				if (test == 0) {
					document.getElementById('nouveau_prix_total_modal').innerHTML = "<div class='col' style=''><span style='color: #050013;'> Dès réception du paiement de </span><br>" + ((((MonPanier.totalpanier()))) + Number(prix_choix_livraison)).toFixed(2) + " <span style='color: #050013;'>euro(s)<br>Votre commande vous sera envoyée.<br>Choississez un mode de paiement code est auvais .</span> </div>";
					document.getElementById('afficher_message_remerciement_commande').innerHTML = "Votre commande n'a pas été enregistrée";
					document.getElementById('container').style.display = "none";
				} else {
					document.getElementById('nouveau_prix_total_modal').innerHTML = "<div class='col' style=''><span style='color: #050013;'> Dès réception du paiement de </span><br>" + ((((MonPanier.totalpanier()))) + Number(prix_choix_livraison)).toFixed(2) + " <span style='color: #050013;'>euro(s)<br>Votre commande vous sera envoyée.<br>Choississez un mode de paiementelectrique.</span> </div>";
					document.getElementById('afficher_message_remerciement_commande').innerHTML = "Merci pour votre commande <br>Elle a bien été enregistrée";
					document.getElementById('container').style.display = "block";
				}
				//fin teste en plus de savoir si le code promo est azerty si il y a quelque chose dans le panier 

			} //fin si le code promotion n'est pas bon 
		} //fin de form.onclick = function(e)

		//fin code promo

		//apres toutes ces conditions je souhaiterais afficher un message suivant le nombre de sachets de perle
		//************************************
		//test condition sur quanditee de perle	
		//***********************************
		//************************************
		let total_perle_remise = MonPanier.totalquantite();
		document.getElementById('remise_10').innerHTML = MonPanier.totalquantite();
		console.log(total_perle_remise);
		if (total_perle_remise <= 10) {
			document.getElementById("message_remise_10").innerHTML = "vous avez mois de 10 perles ";

		}
	} // fin de //mode de livraison sans remise


	$('.total-panier-modal').html(MonPanier.totalpanier());
	$('.total-quantite').html(MonPanier.totalquantite());
	if ((Qte_Minimum == 1) && (Math.sign(MonPanier.totalquantite() - Qte_Minimum_Valeur) == -1) && (MonPanier.totalquantite() != 0)) {
		//document.getElementById('qte_minimum_report').innerHTML = txt_qte_minimum_bad;
	} else if ((Qte_Minimum == 1) && ((Math.sign(MonPanier.totalquantite() - Qte_Minimum_Valeur) == 1) || (Math.sign(MonPanier.totalquantite() - Qte_Minimum_Valeur) == 0)) && (MonPanier.totalquantite() != 0)) {
		//document.getElementById('qte_minimum_report').innerHTML = txt_qte_minimum_ok;
	} else if (Qte_Minimum == 1) {
		//document.getElementById('qte_minimum_report').innerHTML = txt_qte_minimum_defaut;  
	} else if (Qte_Minimum == 0) {
		//document.getElementById('qte_minimum_report').innerHTML = "";
	}
	//document.getElementById('total_qte_haut').innerHTML = MonPanier.totalquantite();
	document.getElementById('total_qte').innerHTML = MonPanier.totalquantite();
	document.getElementById('total_qte_bas').innerHTML = MonPanier.totalquantite();
	document.getElementById('total_qte_modal').innerHTML = MonPanier.totalquantite();

} //fin fonction panier

$('.show-panier').on("click", ".effacer-item", function(event) {
	var nom = $(this).data('nom')
	MonPanier.enlever_produit_de_panier_tous(nom);
	afficherpanier();
})

$('.show-panier').on("click", ".moins-item", function(event) {
	var nom = $(this).data('nom')
	MonPanier.enlever_produit_de_panier(nom);
	afficherpanier();
})

$('.show-panier').on("click", ".plus-item", function(event) {
	var nom = $(this).data('nom')
	MonPanier.ajouter_produit_dans_panier(nom);
	afficherpanier();
})

$('.show-panier').on("change", ".item-quantite", function(event) {
	var nom = $(this).data('nom');
	var quantite = Number($(this).val());
	MonPanier.setquantiteForItem(nom, quantite);
	afficherpanier();
});

afficherpanier();

bonjour,

Comme d'habitude, ne néglige pas d'indiquer à quelle ligne de code se produit le message d'erreur.

Montre nous la partie du code source HTML concernée.  Ce code source est à récupérer dans le navigateur, quand la page est affichée.

encore merci a vous deux pour tout