vue [Javascript] Checkbox prix
Kommunauty
Connexion
Inscription

[Javascript] Checkbox prix


Furiol Messages : 50

Bonjour ,

je souhaite crée un check box en javascript , mais mon script ne fonctionne pas .

_ l'orsque je clique plusieur fois sur les options ,il y a un accumulation d' addition , de plus il ne calcul pas la Tva .

bref , je suis complètement perdue , si quelqu'un pouvais m'aider avec mon code sa serai formidable.

Cordialement,

Voici le code:

<script>
      var affichage=0;
 
      function fproduit(objet, num, prix){
        if(document.forms[0].elements[num].checked){
          affichage=prix;
         document.getElementById("prixHT")="";
          document.getElementById("prixHT")=affichage();
        }
      }


  
      
     
  function foption(objet, num, prix){
        if(document.forms[0].elements[num].checked){
          affichage+=prix;
         document.getElementById("prixHT")="";
          document.getElementById("prixHT")=affichage();
        }
}

       
function affichage(){
  var prixHT = produit + option;
  var prixTTC = prixHT * 1.19;
  document.getElementById("prixHT").innerHTML=prixHT;affichage()
  document.getElementById("prixTTC").innerHTML=prixTTC;affichage()
}  
  
    </script>
  
    
    <form action="g.html" name="form">
      Article 1<input type="radio" name="case1" id="fproduit" onclick="produit(this, 0, 10.56);"/>10.56€<br />
      Article 2<input type="radio" name="case1" id="fproduit" onclick="produit(this, 1, 20);"/>20€<br />
      Article 3<input type="radio" name="case1" id="fproduit" onclick="produit(this, 2, 30);"/>30€<br />
  <br />
  <br />
  <br />
  
  Options :
  <br />
  <br />
      Options 1<input type="checkbox" name="case4" id="foption" onclick="option(this, 3, 10);"/>10€<br />
      Options 2<input type="checkbox" name="case5" id="foption" onclick="option(this, 4, 15);"/>15€<br />
  
    </form>


Prix HT<div id="prixHT">0</div>€<br />
Prix TTC<div id="prixTTC">0</div>€<br />
samedi 21 janvier 2012

SiMax Messages : 7572

Salut !

Chez moi le code ne fonctionne pas du tout.

Problèmes :

  • Les fonctions produit et option appelées dans les input n'existent pas. Il faut appeler fproduit et foption.
  • Impossible de mettre deux ID identiques sur deux éléments. Là, autant enlever les ID.
  • Dans la fonction fproduit, pas besoin de vérifier si c'est coché ou pas.
  • Dans la fonction foption, si c'est déjà coché, alors il faut retrancher le prix à la variable option. Comme ça, quand on décoche, ça diminue le prix.
  • Dans la fonction affichage, tu fais appel aux variables produit et option qui n'existent pas.

Enlève la variable affichage du début et remplace-la par 2 variables : une pour le produit et une pour l'option.


Essaye de faire quelque chose à partir de ces remarques et montre-moi ce que ça donne

dimanche 22 janvier 2012

Furiol Messages : 50

OKay je te remercie de ton aide , j'ai réussi a faire sa , mais il y a certains points que je n'arrive pas a faire , comme retrancher le prix a la variable option.

le script re-fonctionne mais la tva ne se calcul toujours pas et le décoche option ne deminue pas le prix.

<script>

 function fproduit(){
  produit=10;
  affichage();

}
function foption(){
  option+=1;
  affichage();

}
 
      function fproduit(objet, num, prix){
        if(document.forms[0].elements[num].checked){
          affichage=prix;
         document.getElementById("prixHT").innerHTML="";
          document.getElementById("prixHT").innerHTML=affichage;
        }
      }


  
      

  function foption(objet, num, prix){
        if(document.forms[0].elements[num].checked){
          affichage+=prix;
  prix-=affichage;
         document.getElementById("prixHT").innerHTML="";
          document.getElementById("prixHT").innerHTML=affichage;
        
       
        }
}
   
function affichage(){
  var prixHT = fproduit + foption;
  var prixTTC = prixHT * 1.19;
  document.getElementById("prixHT").innerHTML=prixHT;
  document.getElementById("prixTTC").innerHTML=prixTTC;
}
      
  
    </script>
  
    
    <form action="g.html" name="form">
      Article 1<input type="radio" name="produit" id="" onClick="fproduit(this, 0, 10.56);"/>10.56€<br />
      Article 2<input type="radio" name="produit" id="" onClick="fproduit(this, 1, 20);"/>20€<br />
      Article 3<input type="radio" name="produit" id="" onClick="fproduit(this, 2, 30);"/>30€<br />
  <br />
  <br />
  <br />
  
  Options :
  <br />
  <br />
      Options 1<input type="checkbox" name="option" id="" onClick="foption(this, 3, 10);"/>10€<br />
      Options 2<input type="checkbox" name="option" id="" onClick="foption(this, 4, 15);"/>15€<br />
  
    </form>


Prix HT<div id="prixHT">0</div>€<br />
Prix TTC<div id="prixTTC">0</div>€<br />
dimanche 22 janvier 2012

SiMax Messages : 7572

La fonction fproduit doit récupérer le prix quand tu check un input. Là t'as mis 10 mais ça varie normalement.

Pour le foption, il faut vérifier si c'est checked ou pas. Comme je l'ai déjà fait et que je veux pas te torturer, voici le code. Regarde-le bien en détail et dis-moi si tu as compris :

function foption(num, prix)
{
if(document.forms[0].elements[num].checked)
{
option+=prix;
}
else
{
option -= prix;
}

affichage();
}

Il faut aussi changer le code des options au passage :

Option 1 <input type="checkbox" name="case4" onclick="foption(3, 10);"/>10€<br />
Option 2 <input type="checkbox" name="case5" onclick="foption(4, 15);"/>15€<br />
dimanche 22 janvier 2012

Furiol Messages : 50

merci , donc dans l'option :

if(document.forms[0].elements[num].checked)
verifie si l'element est checked.

else
permet d’exécuter une autre fonction qui est de diminuer le prix quand on décoche.

Donc je doit inséré cette foption et suprimer l'ancien ?

<script>

 function fproduit(){
  produit=0;
  affichage();

}
function foption(){
  option+=1;
  affichage();

}
 
      function fproduit(objet, num, prix){
        if(document.forms[0].elements[num].checked){
          affichage=prix;
         document.getElementById("prixHT").innerHTML="";
          document.getElementById("prixHT").innerHTML=affichage;
        }
      }
     
       
    
      function foption(num, prix)
    {
    if(document.forms[0].elements[num].checked)
        {
        option+=prix;
        }
    else
        {
        option -= prix;
        }
    
    affichage();
    }
        
   
        function affichage(){
  var prixHT = fproduit + foption;
  var prixTTC = prixHT * 1.19;
  document.getElementById("prixHT").innerHTML=prixHT;
  document.getElementById("prixTTC").innerHTML=prixTTC;
}
      
      
    </script>
      
    
  
dimanche 22 janvier 2012 (Dernière édition dimanche 22 janvier 2012)

SiMax Messages : 7572

En fait tu as le "if", c'est la condition. Donc si la condition est remplie, ça execute ce qu'il y a entre les crochets. Et le "else" (=sinon) c'est pour si la condition n'est pas remplie.

Et oui, il faut remplacer la fonction.

C'est bien d'essayer de faire du concret en JS mais lis quand même les tutoriels de base. Le coup des conditions, des variables, etc. c'est le strict minimum à savoir pour pouvoir commencer à faire des scripts

dimanche 22 janvier 2012

Furiol Messages : 50

oui , je pense travailler sur les cours js dans quelque mois , c'est juste que je suis un peu préssé et que je souhaite réussir ce script alors je lis des tuto sur js un peu partout en meme temps de réaliser le script ce qui me donne beaucoup de mal car je ne comprend pas tous .

j'ai remplacer la fonction que tu m'a donner puis aussi remplacer les fonction input pour l'option , mais malheureusement le check box "option" ne fonctionne plus et la tva ne s'active toujorus pas

voici le code en sa totalité :

<script>

 function fproduit(){
  produit=10;
  affichage();

}
function foption(){
  option+=1;
  affichage();

}
 
      function fproduit(objet, num, prix){
        if(document.forms[0].elements[num].checked){
          affichage=prix;
         document.getElementById("prixHT").innerHTML="";
          document.getElementById("prixHT").innerHTML=affichage;
        }
      }
     
        
  
      
    
     function foption(num, prix)
    {
    if(document.forms[0].elements[num].checked)
        {
        option+=prix;
        }
    else
        {
        option -= prix;
        }
    
    affichage();
    }
      
        
   
        function affichage(){
  var prixHT = fproduit + foption;
  var prixTTC = prixHT * 1.19;
  document.getElementById("prixHT").innerHTML=prixHT;
  document.getElementById("prixTTC").innerHTML=prixTTC;
}
      
      
    </script>
      
    
    <form action="g.html" name="form">
      Article 1<input type="radio" name="produit"  onClick="fproduit(this, 0, 10.56);"/>10.56€<br />
      Article 2<input type="radio" name="produit"  onClick="fproduit(this, 1, 20);"/>20€<br />
      Article 3<input type="radio" name="produit"  onClick="fproduit(this, 2, 30);"/>30€<br />
      <br />
      <br />
      <br />
      
      Options :
      <br />
      <br />
      Option 1 <input type="checkbox" name="case4" onclick="foption(3, 10);"/>10€<br />
Option 2 <input type="checkbox" name="case5" onclick="foption(4, 15);"/>15€<br />
      
    </form>
    

     Prix HT<div id="prixHT">0</div>€<br />
     Prix TTC<div id="prixTTC">0</div>€<br />
dimanche 22 janvier 2012 (Dernière édition dimanche 22 janvier 2012)

SiMax Messages : 7572

Hum. Je viens de te dire qu'il fallait remplacer la fonction et là on se retrouve avec les fonctions en double. Il y a un problème.

dimanche 22 janvier 2012

Furiol Messages : 50

okay donc sa doit donner sa ?

<script>

      function fproduit(num, prix)
    {
    if(document.forms[0].elements[num].checked)
        {
        produit=prix;
        }
affichage();
    }
   
     
        
      
    
     function foption(num, prix)
    {
    if(document.forms[0].elements[num].checked)
        {
        option+=prix;
        }
    else
        {
        option -= prix;
        }
    
    affichage();
    }
      
        
   
        function affichage(){
  var prixHT = fproduit + foption;
  var prixTTC = prixHT * 1.19;
  document.getElementById("prixHT").innerHTML=prixHT;
  document.getElementById("prixTTC").innerHTML=prixTTC;
}
      
      
    </script>
dimanche 22 janvier 2012 (Dernière édition dimanche 22 janvier 2012)

SiMax Messages : 7572

Oui voila

Vu que t'es très proche, t'as le droit à la solution. Mais lis tout bien et dis moi si tu comprends pas quelque chose

<script>
var produit=0;
var option=0;

function fproduit(prix)
{
produit=prix;
affichage();
}

function foption(num, prix)
{
if(document.forms[0].elements[num].checked)
{
option+=prix;
}
else
{
option -= prix;
}

affichage();
}

function affichage()
{
prixHT = produit + option;
prixTTC = prixHT * 1.19;

prixHT = Math.round(prixHT*100)/100;
prixTTC = Math.round(prixTTC*100)/100;

document.getElementById("prixHT").innerHTML = prixHT;
document.getElementById("prixTTC").innerHTML = prixTTC;
}
</script>
      
    
    <form action="g.html" name="form">
      Article 1<input type="radio" name="case1" onclick="fproduit(10.56);"/>10.56€<br />
      Article 2<input type="radio" name="case1" onclick="fproduit(20);"/>20€<br />
      Article 3<input type="radio" name="case1" onclick="fproduit(30);"/>30€<br />
      <br />
      <br />
      <br />
      
      Options :
      <br />
      <br />
      Options 1<input type="checkbox" name="case4" onclick="foption(3, 10);"/>10€<br />
      Options 2<input type="checkbox" name="case5" onclick="foption(4, 15);"/>15€<br />
      
    </form>
    

     Prix HT : <b id="prixHT">0</b>€<br />
     Prix TTC : <b id="prixTTC">0</b>€<br />
dimanche 22 janvier 2012

Page suivante »