Расчет в реальном времени?

Question

Я искал весь SOF и не мог найти темы, которая соответствует моей проблеме. Я написал HTML-форму, которую я буду использовать PHP для обработки позже, но у меня есть некоторые опции в форме, которую пользователь может выбрать. Вот код 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> 

Таким образом, пользователь может выбирать между обычной и рабочей моделью. Я пытаюсь установить его так, чтобы, когда пользователь проверяет переключатель мастер-модели, он добавляет общую цену (указанную в тегах абзаца). Вот моя попытка моего едва известного языка, 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() + ''); 

Так что я пытаюсь сделать это добавить к basePrice в режиме реального времени, а затем распечатать его на месте ID пометкой «общий» каждый раз, когда пользователь вносит изменения в выборку (в режиме реального времени). Поэтому, если пользователь выбирает мастер-модель, скрипт добавит 15 и 5, что приведет к 20, и если они выберут basemodel, скрипт добавит 15 и 0, что приведет к 15. Я оставил переменную modelTotal неопределенную, поскольку она должна быть определена позже в скрипте. Может ли кто-нибудь помочь мне с этим?

Answer 1

Это должно работать так, как вы хотите. Кроме того, не требуется 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

Вот рабочий пример того, что я думаю, что вы просите.

<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>