Calculs en temps réel?

Question

J'ai parcouru toutes les sources de données et je n'ai trouvé aucun sujet correspondant à mon problème. J'ai écrit un formulaire HTML que j'utiliserai pour le traitement de PHP plus tard, mais j'ai quelques options dans le formulaire qu'un utilisateur peut choisir. Voici le code HTML

<label for="FIELD6">Model Type: </label><br> 
<input type="radio" id="basemodel" name="FIELD6" value="Normal Model" checked onclick="doMath()" />Normal Model<br> 
<input type="radio" id="workshopmodel" name="FIELD6" value="Workshop Model" onclick="doMath()" data-clicked="no" />Workshop Model 
<p id="total"></p> 

L'utilisateur peut donc choisir entre un modèle normal et un modèle d'atelier. J'essaye de le régler de telle sorte que lorsque l'utilisateur vérifie le bouton radio modèle d'atelier, il ajoute au prix total (spécifié dans les étiquettes de paragraphe). Voici ma tentative de ma langue à peine connue, jQuery:

function doMath() { 
    var basePrice = 15; 
    var baseModel = 0; 
    var customModel = 5; 
    var modelTotal = ; 
    function workshopModel() { 
     if(getElementById("workshopmodel").click(function() { 
      modelTotal = basePrice + customModel; 
     } 
    } 
    function defaultModel() { 
     if(getElementById("basemodel").click(function() { 
      modelTotal = total basePrice + baseModel; 
     } 
    } 
} 
$("#total").html('<font color="black">Total Price:</font><font color="#09ff00">' + workshopModel() + ''); 

Je suis en train de faire ajouter à la basePrice en temps réel, puis l'imprimer à la place de l'ID marqué « total » à chaque fois l'utilisateur fait un changement de sélection (en temps réel). Donc, si l'utilisateur choisit workshopmodel, le script ajoutera 15 et 5, aboutissant à 20, et s'il choisit basemodel, le script ajoutera 15 et 0, ce qui donnera 15. J'ai laissé la variable modelTotal indéfinie comme elle devrait être définie plus tard dans le script. Est-ce que quelqu'un pourrait m'aider avec ceci?

Answer 1

Cela devrait fonctionner comme vous le souhaitez. En outre, ne nécessite pas jQuery.

function doMath() { 
 
    var basePrice = 15; 
 
    var baseModel = 0; 
 
    var customModel = 5; 
 
    var modelTotal; 
 
    if (document.querySelector('input[name="FIELD6"]:checked').value == "Normal Model") { 
 
     modelTotal = basePrice + customModel; 
 
    } 
 

 
    if (document.querySelector('input[name="FIELD6"]:checked').value == "Workshop Model") { 
 
     modelTotal = basePrice + baseModel; 
 
    } 
 
    console.log(modelTotal); 
 
    document.getElementById('total').innerHTML = '<span style="color:black">Total Price:' + modelTotal + '</span>'; 
 
}

<label for="FIELD6">Model Type:</label> 
 
<br> 
 
<input type="radio" id="basemodel" name="FIELD6" value="Normal Model" onclick="doMath()" />Normal Model 
 
<br> 
 
<input type="radio" id="workshopmodel" name="FIELD6" value="Workshop Model" onclick="doMath()" />Workshop Model 
 
<div id="total"></div>

Answer 2

Voici un exemple concret de ce que je pense que vous demandez.

<label for="FIELD6">Model Type:</label><br> 
<input type="radio" id="basemodel" name="FIELD6" value="Normal Model" checked onclick="doMath(this)" />Normal Model<br> 
<input type="radio" id="workshopmodel" name="FIELD6" value="Workshop Model" onclick="doMath(this)" data-clicked="no" />Workshop Model 
<p id="total"></p> 

<script type="text/javascript"> 
    function doMath(ele) { 
     var total = 15; 
     if($(ele).attr('id') === 'workshopmodel') { 
      total += 5; 
     } 
     $("#total").html('<font color="black">Total Price:</font><font color="#09ff00">' + total); 
    } 
</script>