javascript - Real Time Calculations? -
i have searched through of sof , couldn't find topic matches problem. have written html form use php process later, have options in form user can choose. here html code
<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>
so user can choose between normal , workshop model. trying set when user checks workshopmodel radio button, adds total price (specified in paragraph tags). here attempt @ barely-known language, 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() + '');
so trying make add baseprice in real time, , print in place of id marked "total" every time user makes change in selection (in real-time). if user chooses workshopmodel, script add 15 , 5, resulting in 20, , if choose basemodel, script add 15 , 0, resulting in 15. left variable modeltotal undefined should defined later on in script. can me out this?
this should work how want. also, not require 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>
Comments
Post a Comment