0
votes

Comment afficher automatiquement le total sans bouton de soumission?

Je suis très nouveau à JavaScript, donc une réponse étape par étape serait très appréciée. À l'heure actuelle, mon code est configuré de sorte que lorsque vous cliquez sur le bouton Soumettre, il affiche le total mais j'aimerais que le total soit mis à jour automatiquement en cochant simplement les cases à cocher et ne pas avoir de bouton d'envoi. xxx

javascript dom-events

3 commentaires

Vous pouvez lier la fonction à chaque case ' modifier .


                                        
                                                                            Vous pouvez utiliser  objet.addeventlistener ("Keyup", CalcTotal);  Cela signifie que vous tapez vos numéros, les informations seront à jour en direct.

                                        
                                                                            Et veuillez publier votre code HTML afin que nous puissions reproduire votre situation et fournir une réponse.



                                    
                    3 Réponses :
                    
                                            
                            
                                
                                    0
 votes
                                
                            
                            
                                
                                     La clé est à écouter de l'événement  code> d'entrée  de code> sur les éléments d'entrée au lieu de l'événement  code> sur  code> sur l'élément de bouton. 
 Notes supplémentaires, si possible:  p> 

  Utilisez des guillemets simples dans JS, Doubles citations en HTML  P>  LI>
  Utilisez  let  code> ou  const  code> au lieu de  var  code>  p>  li>
  ne réinventez pas  .ReRuce  code> lorsque vous devez  réduire  em> un tableau de valeurs en une seule valeur (par exemple, calculez une somme).  P>  li>
  Utilisez des chaînes de modèle (par exemple  `y: $ {y}`  code>) au lieu de concaténer des chaînes (par exemple  "Y  code>).  p>  li>
 ul> 
  p> 


<label><input type="checkbox" value=30>$30 hamburger</label>
<label><input type="checkbox" value=45>$45 french fries</label>
<label><input type="checkbox" value=1>$1 cola</label>
<label><input type="checkbox" value=60>$60 parking</label>
<label><input type="checkbox" value=20>$20 cookie</label>
<label><input type="checkbox" value=290>$290 large cookie</label>
<div id="total"></div>

                                

                                                                    
                                    
                                    
                                        2 commentaires
                                        
                                                                                            
                                                    Merci j'ai essayé votre méthode sur le projet d'origine et cela a fonctionné, mais maintenant que je l'essaie d'essayer un autre projet, cela ne fonctionne pas pour une raison quelconque.                                                
                                                
                                                                                            
                                                    Vous devrez être plus précis.                                                
                                                
                                                                                    
                                    
                                                            
                        
                        
                                            
                            
                                
                                    0
 votes
                                
                            
                            
                                
                                     En réalité, vous devez lier l'événement de Cochez la case  Changer  CODE>, au lieu de formulaire bouton Soumettre  Cliquez sur  CODE>. Que chaque fois que vous modifiez une valeur de case à cocher en vérifiant ou en décochez-la, il appelle la fonction  CalcTotal ()  code> pour mettre à jour la valeur. 
 voici le code JavaScript mis à jour:  p> 
function calcTotal()
{
  var itemTotal = 0;
  var items = document.getElementsByTagName("input");
  for (var i = 0; i < 5; i++) {
    if (items[i].checked){
      itemTotal += parseInt(items[i].value);
    }
  }
  document.getElementById("total").innerHTML = "Your order total is $" + itemTotal +".00";
}
var checkBoxItems = document.getElementsByTagName("input");
checkBoxItems.addEventListener("change", calcTotal);

                                

                                                                    
                                    
                                    
                                        0 commentaires
                                        
                                                                                    
                                    
                                                            
                        
                        
                                            
                            
                                
                                    0
 votes
                                
                            
                            
                                
                                     Ajoutez simplement un événement de changement à chaque case. Lorsque vous basculez l'état vérifié, recalculez le total en saisissant les cases à cocher : cochées  code> cochées. 
  p> 


<label>$1 <input type="checkbox" value="1" /></label>
<label>$10 <input type="checkbox" value="10" /></label>
<label>$100 <input type="checkbox" value="100" /></label>
<div>Your order total is: <span id="total">$0.00</span></div>

                                

                                                                    
                                    
                                    
                                        0 commentaires