unistake Posted August 14, 2009 Share Posted August 14, 2009 Hi all, I am having trouble with a very basic calculator Ive been trying to get working. Basically there are 2 text boxes and 2 radio buttons. each of which either add or subtract the 2 numbers entered in the text fields. I am hoping someone could correct the script or atleast show me where I have gone wrong Thanks <script> function calculator() { var type = document.getElementById('radio'); if(type.value == "add") { total = document.calcform.box1.value + document.calcform.box2.value; result.InnerHTML = total; } else(type.value == "subtract") { total = document.calcform.box1.value - document.calcform.box2.value; result.InnerHTML = total; } } </script> <form name="calcform"> <label> <input name="box1" type="text" id="num" value="4"> </label> <label> <input name="box2" type="text" id="num" value="5"> </label> <label> <input type="radio" name="radio" id="radio" value="add" onClick="return calculator();"> add </label> <label> <input type="radio" name="radio" id="radio" value="subtract" onClick="return calculator();"> subtract </label> <div id="result">output is here</div> </form> Quote Link to comment https://forums.phpfreaks.com/topic/170326-forms-and-js/ Share on other sites More sharing options...
Psycho Posted August 15, 2009 Share Posted August 15, 2009 1. When you define type, you are only creaating a reference to the radio GROUP. A GROUP does not have a value, the options do. You could either iterate through each option in the group and find which one is checked and then get the value of that option OR, even easier, pass a parameter to the function. 2. You never define the result object to assign the innerHTML value to. <html> <head> <script type="text/javascript"> function calculator(op, resultID) { var param1 = parseFloat(document.calcform.box1.value); var param2 = parseFloat(document.calcform.box2.value); var total = param1 + param2 * ((op=='add')?1:-1); document.getElementById(resultID).innerHTML = total; } </script> </head> <body> <form name="calcform"> <label> <input name="box1" type="text" id="num" value="4"> </label> <label> <input name="box2" type="text" id="num" value="5"> </label> <label> <input type="radio" name="radio" id="radio" value="add" onClick="calculator('add', 'result');"> add </label> <label> <input type="radio" name="radio" id="radio" value="subtract" onClick="calculator('sub', 'result');"> subtract </label> <div id="result">output is here</div> </form> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/170326-forms-and-js/#findComment-898701 Share on other sites More sharing options...
unistake Posted August 15, 2009 Author Share Posted August 15, 2009 thanks for your help, works well! Can you explain this code though * ((op=='add')?1:-1); Is there any way i could use if functions rather than the above, as I understand them a lot more *edit = spelling der! Quote Link to comment https://forums.phpfreaks.com/topic/170326-forms-and-js/#findComment-898756 Share on other sites More sharing options...
unistake Posted August 15, 2009 Author Share Posted August 15, 2009 any suggestions? Quote Link to comment https://forums.phpfreaks.com/topic/170326-forms-and-js/#findComment-898975 Share on other sites More sharing options...
Psycho Posted August 15, 2009 Share Posted August 15, 2009 Any suggestions for what, it works right? thanks for your help, works well! Can you explain this code though * ((op=='add')?1:-1); Is there any way i could use if functions rather than the above, as I understand them a lot more That is the ternary operator, which some refer to as the shorthand notation for an if/else. Yes you can use an IF/ELSE statement, but if you don't understand it that should be an incentive to learn something new instead of not using it because you don't understand it. The pice of code is multiplying the second value by 1 id the operation is add or by -1 if the operation is subtract. The total calculation is val1 + val2 * (1 or -1) So the calcualtion is always adding the values, but in the case of a subtract operation it will simply change the sign of the second value. Here is the long version of the total calculation: if (op=='add') { var total = param1 + param2; } else { var total = param1 1 param2; } Quote Link to comment https://forums.phpfreaks.com/topic/170326-forms-and-js/#findComment-898984 Share on other sites More sharing options...
unistake Posted August 15, 2009 Author Share Posted August 15, 2009 thanks mjdamato, really appreciate it. I agree with your learning comment, and I thought of that when I was asking for the IF/ELSE statement! but this particular script I have been trying to figure out for over a week this script so i resorted back to what I know! Thanks Quote Link to comment https://forums.phpfreaks.com/topic/170326-forms-and-js/#findComment-898991 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.