Bonjour, j'explique mon problème j'ai 3 zone de texte. L'utilisateur choisie les valeur dans les 3 zones et dans mon JavaScript je calcul c'est valeur puis les renvoies dans mon html sous forme de balise <div> avec un id et je voulais fais une addition des 2 valeurs qui sont envoyé dans les 2 div est-ce possible ?

Bonjour, je ne m'y connais pas en javascript mais tu ne peux pas par hasard utiliser du PHP, donc par exemple extraire dans une variable php plutôt que mettre directement en div comme ça tu vas pouvoir d'une part créer ensuite les div en mettant les valeurs contenues dans les variables php mais aussi additionner les variables php ?

Je connais pas la compatibilité entre javascript et php

Oui moi non plus, je propose juste quelque chose de ce que je connais, car JS je n'ai jamais touché. J'espère pour toi que quelqu'un qui s'y connait en JS pourra t'aider mais moi je ne peux pas vraiment faire plus :/

-
Edité par Fuama 22 juin 2018 à 12:16:00

Bonjour,

Tout est possible en JS

Tu peux mettre un exemple de ton code stp, pour voir exactement ce que tu veux faire.

/*
// Calcul du nombre de copie total
    function Copiestotal(nbcopie,couleur) {
        var nbexmplaire = window.document.getElementById('nbexmplaire').value; 

        var ExemplaireT= parseFloat(nbcopie) + parseFloat(couleur);
        
        window.document.getElementById("zone3").innerHTML = ExemplaireT; 
    }
*/
// Calcul de copie noir&blanc
    function calculCopies(nbcopie , ExemplaireT) {
        var nbcopie = window.document.getElementById("nbcopie").value;
        var ExemplaireT = window.document.getElementById("ExemplaireT").value;
        var prixf;

        var copienb = nbcopie * ExemplaireT;
        
        // Si copienb inférieur ou égal à 10
        if ( copienb <= 10) {
            prixf = copienb * 0.10;
        }

        // Si copienb inférieur 50
        else if (copienb < 50 ) {
            prixf = copienb * 0.08;
        }

        // Si copienb inférieur 200
        else if (copienb < 200) {
            prixf = copienb * 0.07;
        }

        // Si copienb inférieur 500
        else if (copienb < 500) {
            prixf = copienb * 0.06;
        }

        // Si copienb inférieur 1000
        else if (copienb < 1000) {
            prixf = copienb * 0.05;
        }

        // Si copienb inférieur 3000
        else if (copienb < 3000) {
            prixf = copienb * 0.04;
        }

        // Si copienb inférieur 5000
        else if (copienb < 5000) {
            prixf = copienb * 0.035;
        }

        // Si copienb supérieur ou égal à 5000
        else if (copienb >= 5000) {
            prixf = copienb * 0.035;
        }

        else {
            // Sinon, pas normal
            prixf = -1;
        }
        window.document.getElementById("zone").innerHTML = prixf.toFixed(2);
    }

// Calcul copie couleur
    function CalculCouleur(couleur1, ExemplaireT) {
        var couleur1 = window.document.getElementById("couleur1").value;
        var ExemplaireT = window.document.getElementById("ExemplaireT").value;

        var prixfc;

        var couleur = couleur1 * ExemplaireT;
     
        // Si couleur inférieur ou égal à 10
        if ( couleur <= 15) {
            prixfc = couleur * 0.70;
        }

        // Si couleur inférieur 50
        else if (couleur < 50 ) {
            prixfc = couleur * 0.55;
        }

        // Si couleur inférieur 100
        else if (couleur < 100) {
            prixfc = couleur * 0.50;
        }

        // Si couleur inférieur 200
        else if (couleur < 200) {
            prixfc = couleur * 0.45;
        }

        // Si couleur inférieur 500
        else if (couleur < 500) {
            prixfc = couleur * 0.40;
        }

        // Si couleur inférieur 1000
        else if (couleur < 1000) {
            prixfc = couleur * 0.30;
        }

        // Si couleur supérieur ou égal à 1000
        else if (couleur >= 1000) {
            prixfc = couleur * 0.25;
        }

        else {
            // Sinon, pas normal
            prixfc = -1;
        }
        window.document.getElementById("zone2").innerHTML = prixfc.toFixed(2);
    }

// Caluclue la somme des copies couleur et noir&blanc

    function CalculTCopies() {
        var zone = window.document.getElementsByTagName("zone").value;
        var zone2 = window.document.getElementsByTagName("zone2").value;
        var totalZ;

        var totalZ = parseFloat(zone) + parseFloat(zone2);
        totalZ = document.getElementById("zone7").innerHTML;
    }

//calcul le prix des reliures plastique

   function GetPrixReliure(nbcopie, couleur)
    {    
        var nbcopie = window.document.getElementById("nbcopie").value;
        var couleur1 = window.document.getElementById("couleur1").value;
        var prixReliureP;

        var copies = nbcopie + couleur1;
 //       var prixReliurePT = parseFloat(prixReliureP) * parseFloat(ExemplaireT); 

        //prix reliure plastique inférieur a 25 copies
        if(copies <= 25) {
            prixReliureP = 1.00;
        }

        //prix reliure plastique inférieur a 45 copies
        else if (copies < 45) {
            prixReliureP = 1.00;
        }

        //prix reliure plastique inférieur a 65 copies
        else if (copies < 65) {
            prixReliureP = 1.50;
            
        }

        //prix reliure plastique inférieur a 95 copies
        else if (copies < 95) {
            prixReliureP = 1.50;
        
        }

        //prix reliure plastique inférieur a 125 copies
        else if (copies < 125) {
            prixReliureP = 2;
        }

        //prix reliure plastique inférieur a 145 copies
        else if (copies < 145) {
            prixReliureP = 2;
            
        }

        //prix reliure plastique inférieur a 165 copies
        else if (copies < 165) {
            prixReliureP = 2.50;
            
        }

        //prix reliure plastique inférieur a 195 copies
        else if (copies < 195) {
            prixReliureP = 2.50;
            
        }

        //prix reliure plastique inférieur a 225 copies
        else if (copies < 225) {
            prixReliureP = 2.50;
            
        }

        //prix reliure plastique inférieur a 240 copies
        else if (copies < 240) {
            prixReliureP = 2.50;
            
        }

        //prix reliure plastique inférieur a 280 copies
        else if (copies < 280) {
            prixReliureP = 3;
            
        }

        //prix reliure plastique inférieur a 330 copies
        else if (copies < 330) {
            prixReliureP = 3;
            
        }

        //prix reliure plastique inférieur a 390 copies
        else if (copies < 390) {
            prixReliureP = 4;
            
        }

        //prix reliure plastique inférieur a 450 copies
        else if (copies < 450) {
            prixReliureP = 4;
            
        }

        //prix reliure plastique si c'est au dessus de 450 copies
        else if (copies > 450) {
            prixReliureP = ('Trop de page maximum 450');            
        }


        window.document.getElementById("zone4").innerHTML = prixReliureP;
    }

//Calcul prix des reliures metallique
    function GetPrixReliure1(nbcopie, couleur1)
    {    
        var nbcopie = window.document.getElementById("nbcopie").value;
        var couleur1 = window.document.getElementById("couleur1").value;
        var ExemplaireT = window.document.getElementById("ExemplaireT").value;
        var prixReliureM;

        var prixReliureMT = parseFloat(prixReliureM) * parseFloat(ExemplaireT); 

        //prix reliure Métalique inférieur a 20 copies

        if (nbcopie + couleur1 < 20) {
            prixReliureMT = 2.80;
        }

        //prix reliure Métalique inférieur a 32 copies
        else if (nbcopie + couleur1 < 32) {
            prixReliureMT = 2.80;
        }

        //prix reliure Métalique inférieur a 48 copies
        else if (nbcopie + couleur1 < 48) {
            prixReliureMT = 3.30;
        }

        //prix reliure Métalique inférieur a 64 copies
        else if (nbcopie + couleur1 < 64) {
            prixReliureMT = 3.80;
        }

        //prix reliure Métalique inférieur a 79 copies
        else if (nbcopie + couleur1 < 79) {
            prixReliureMT = 3.80;
        }

        //prix reliure Métalique inférieur a 95 copies
        else if (nbcopie + couleur1 < 95) {
            prixReliureMT = 4.30;
        }

        //prix reliure Métalique inférieur a 110 copies
        else if (nbcopie + couleur1 < 110) {
            prixReliureMT = 4.30;
        }
              
        //prix reliure Métalique si c'est au dessus de 110 copies
        else if (nbcopie + couleur1 > 110) {
            prixReliureMT = ('Trop de page maximum 110');            
        }

        window.document.getElementById("zone5").innerHTML = prixReliureMT;
    }

    function GetPrixReliure2(nbcopie, couleur1)
    {    
        var nbcopie = window.document.getElementById("nbcopie").value;
        var couleur1 = window.document.getElementById("couleur1").value;
        var prixReliuret;

        //prix reliure Thermocollée inférieur a 340 copies
        if (nbcopie + couleur1 < 340) {
                prixReliuret = 4;
        }
             
        //prix reliure Thermocollée si c'est au dessus de 340 copies   
        else if (nbcopie + couleur1 > 340) {
            prixReliuret = ('Trop de page maximum 340');            
        }

        window.document.getElementById("zone6").innerHTML = prixReliuret;
    }

Le code js

Le html 

<!DOCTYPE HTML>
<html>
	<head>
		<title>Copyfac Repro</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1"/>
		<link rel="stylesheet" href="assets/css/main.css" />
		<script type="text/javascript" src="exercice1.js"></script>		

		<script>
			function myFunction1() {
				var checkBox1 = document.getElementById("myCheck1");
				var text1 = document.getElementById("text1");
					if (checkBox1.checked == true){
						text1.style.display = "block";
					} else {
						text1.style.display = "none";
					}
			}
			
			function myFunction2() {
				var checkBox2 = document.getElementById("myCheck2");
				var text2 = document.getElementById("text2");
					if (checkBox2.checked == true){
						text2.style.display = "block";
					} else {
						text2.style.display = "none";
					}
			}
			
			function myFunction3() {
				var checkBox3 = document.getElementById("myCheck3");
				var text3 = document.getElementById("text3");
					if (checkBox3.checked == true){
						text3.style.display = "block";
					} else {
						text3.style.display = "none";
					}
			}
			
			function myFunction4() {
				var checkBox4 = document.getElementById("myCheck4");
				var text4 = document.getElementById("text4");
					if (checkBox4.checked == true){
						text4.style.display = "block";
					} else {
						text4.style.display = "none";
					}
			}
	</script>
		
	</head>
	<body>

		<!-- Header -->
			<header id="header">
				<div class="inner">
					<a href="index.html" class="logo"><strong>Retour</strong></a>
					<nav id="nav">
							<a href="index.html">   Accueil		</a>
							<a href="commande.html">Commande    </a>
							<a href="plan.html">    Plan&Poster </a>
							<a href="forfait.html"> Forfait 	</a>
						</nav>
					<a href="#navPanel" class="navPanelToggle"><span class="fa fa-bars"></span></a>
				</div>
			</header>

	<center>
		<p>
		  	<h3> Remplissez ce formulaire</h3>
		</p>
		    <hr> <!-- RENSEIGNEMENT SUR LE NOMBRE D'EXEMPLAIRE AINSI QUE LE NB DE PAGE  -->
		        <label for="Nbexemplaire"> Sélectionné le nombre d'exemplaires. </label>
		     		<input type="text" name="nbexmplaire" id="ExemplaireT"/>
			            
		        <label> Combien de copie en Noir&Blanc :</label> 
		            <input type="text" name="nbcopie" id="nbcopie" onkeyup="calculCopies()"/>

		        <label>Combien de copie en Couleur : </label>
		            <input type="text" name="couleur" id="couleur1" onkeyup="CalculCouleur()" />

				    	<div id="zone"></div>
				        <div id="zone2"></div>
				        <input type="button" name="" id="zone7" onclick="CalculTCopies()"/> 

			<hr> <!-- RECTO OU RECTO VERSO  -->
		<p>
			<h3> Type d'impression : </h3>
		</p>
					<input Type="checkbox" name="Recto"> 
		                Recto. 
		                            
		            <input Type="checkbox" name="Recto_Verso">
		                Recto Verso.                  
		    <hr>
		                    
		<p>
			<h3> Reliure</h3>
		</p>
			<!-- RELIURE PLASTIQUE -->			      
			<input type="button" name="Plastique" value="Plastique" onclick="GetPrixReliure()"/>
				<p> La reliure comprend un plastique avant et un carton arrière.</p>
			        Plastique avant et carton arrière. 
			            <input type="checkbox" id="myCheck1" onclick="myFunction1()"> 

							<p id="text1" style="display:none">1.10</p>
	                                
		                        <select> <!-- Choix des couleurs  -->
	                                <option> Vert clair 	</option>
	                                <option> Vert foncé		</option>
	                                <option> Bleu clair		</option>
	                                <option> Bleu foncé 	</option>
	                                <option> Jaune 		 	</option>
	                                <option> Rouge      	</option>
	                                <option> Bordeaux 		</option>
	                                <option> Blanc	 		</option>
	                                <option> Marron 		</option>
	                                <option> Gris clair		</option>
	                                <option> Gris foncé		</option>
	                                <option> Beige 			</option>
	                            	<option> Noir   		</option>
	                            </select>

					Plat de couverture (imprimable).
						<input type="checkbox" id="myCheck2" onclick="myFunction2()"> 

							<p id="text2" style="display:none">0.74 </p>
									
								<select> <!-- Choix des couleurs  -->
									<option> Orange			</option>
									<option> Mauve 			</option>
									<option> Vert bouteille	</option>
									<option> Vert clair  	</option>
									<option> Rose		 	</option>
									<option> Gris		 	</option>
									<option> Jaune		 	</option>
									<option> Beige		 	</option>
									<option> Bleu foncé	 	</option>
									<option> Bleu claire 	</option>
									<option> Rouge		 	</option>
								</select>
	                <div id="zone4"></div>
<hr>
			<!-- RELIURE METALLIQUE -->			      						                
			<input type="button" name="metallique" value="Métallique" onclick="GetPrixReliure2()"/>
				<p> La reliure comprend un plastique avant et un carton arrière.</p>
                    Plastique avant et carton arrière.
						<input type="checkbox" id="myCheck3" onclick="myFunction3()"> 

							<p id="text3" style="display:none">1.10</p>

		                        <select> <!-- Choix des couleurs  -->
	                                <option> Vert clair 	</option>
	                                <option> Vert foncé		</option>
	                                <option> Bleu clair		</option>
	                                <option> Bleu foncé 	</option>
	                                <option> Jaune 		 	</option>
	                                <option> Rouge      	</option>
	                                <option> Bordeaux 		</option>
	                                <option> Gris clair		</option>
	                                <option> Gris foncé		</option>
	                                <option> Beige 			</option>
	                                <option> Noir   		</option>
	                            </select>

					Plat de couverture (imprimable).
						<input type="checkbox" id="myCheck4" onclick="myFunction4()"> 

							<p id="text4" style="display:none">0.74 </p>
											
								<select> <!-- Choix des couleurs  -->
									<option> Orange			</option>
									<option> Mauve 			</option>
									<option> Vert bouteille	</option>
									<option> Vert clair  	</option>
									<option> Rose		 	</option>
									<option> Gris		 	</option>
									<option> Jaune		 	</option>
									<option> Beige		 	</option>
									<option> Bleu foncé	 	</option>
									<option> Bleu claire 	</option>
									<option> Rouge		 	</option>
								</select>
	                <div id="zone5"></div>
<hr>
			<!-- RELIURE THERMOCOLLEE -->			      						                
			<input type="button" name="thermocolle" value="thermocolle" onclick="GetPrixReliure2()"/>
<hr>	                    
		<form action="mail.php" method="post" enctype="multipart/mixed">
	        <input type="file" name="fichier" id="fichier">
		                        
		 	    <label for='fichier'>Ajouter une pièce jointe 
		          	<span>(pdf, max 5Mo)</span>
		        </label>
		</form>
        
            <hr>
	            <a href="paiement.html"><input type="button" value="Envoyé" onclick="Page()"></a>


	                <div id="zone6"></div>
	                
			</center>
	</body>
</html>

<!-- Pour le menue il faus figé le fond et faire défilé un menu -->

J'ai un nouveau soucis avec mon js je ne comprend pas pourquoi il ne prend pas en compte les différences sur les reliures il me dit qu'il a toujours trop de copie

-
Edité par Anonyme 22 juin 2018 à 12:43:28

Je suppose que c'est la fonction calculTcopie qui ne marchait pas

 function CalculTCopies() {
        let zone = document.getElementById("zone").innerHTML;
        let zone2 = document.getElementById("zone2").innerHTML;
        let totalZ = Number(parseFloat(zone) + parseFloat(zone2)).toFixed(2);
        document.getElementById("zone7").value = totalZ;
    }

Quelle est la différence entre let et var ? Merci pour la correction ça marche parfaitement.

-
Edité par Anonyme 22 juin 2018 à 15:34:22

let définit une variable locale au bloc de code où elle est définie (bloc if, boucle, fonction). var est systématiquement définie avec pour "scope" toute la fonction dans laquelle elle a été créée, ou est globale si elle a été créée en dehors. Aujourd'hui, l'usage de var est globalement fortement déconseillé pour 99% des cas, car avoir des variables qu'on pensait ne plus exister être encore là peut avoir des effets surprenants. C'est une bonne pratique de confiner les variables qu'on utilise uniquement au bloc dans lequelle elles servent. Si elles servent dans plusieurs blocs, alors elles doivent juste être définies dans le bloc qui les englobe.

function maFonction() {
    if(...) {
        let maVariable = 0;
        // des trucs ici
    }
    console.log(maVariable); // erreur, maVariable n'existe pas dans ce scope
}

function maFonction() {
    if(...) {
        var maVariable = 0;
        // des trucs ici
    }
    console.log(maVariable); // fonctionne
}

-
Edité par Genroa 22 juin 2018 à 16:48:50

Merci beaucoup pour l'explication.