1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

radio buttons.... madio shmuttons.. any help would be appreciatted

Discussion in 'JavaScript' started by pistonpunch, Oct 26, 2007.

0
  1. #1
    Hello all, first off...I have really been loving this site & forums. It has helped me soooo much

    I have been immersed in my beginner javascript class and still trying to put the pieces to together of many different elements .
    With our exam coming up, I am trying to prepare myself with hypothetical scenarios. One such one my resource book asks is, to create a very simple calculator.

    This is my code so far //minus the actual javascript.

    <table border=1>
    <tbody>
    <tr>
    <td><input type="text" name="tb1"/></td>
    <td>
    <input type="radio" value="+" onClick="add()">+<br />
    <input type="radio" value="-" onClick="subtract()" >-<br />
    <input type="radio" value="*" onClick="multi()">*<br />
    <input type="radio" value="/" onClick="divide()">/<br />
    <td>
    <td><input type="text" name="tb2"></td>
    <td><input type="button" value="=" OnClick="calcit"></td>
    <td><input type="text" name="tb3"></td>
    <tr></tr></tbody></table>


    so basically its 2 text boxes that I can enter a value in...& by hitting a radio button, with a corresponding "operator", when I hit the = button it will calculate the sum based on which radio button is pressed.
    I am to try and do it as simply as I can. mostly so I can grasp the concepts

    , but I am finding it difficult to understand. I can set each math function as a variable & when I hit the appropriate radio button it performs the task, but I cant seem to figure out how would I do it if I just want to select the radio button & then have the "=" sign calculate the function.

    the code i figured out was:(for each particular operator)

    function multi(){
    var a,b,c
    a=document.form1.tb1.value;
    b=document.form1.tb2.value;
    c=a*b;
    document.form1.tb3.value=c;
    }

    I realize I'm a Noob, I am really trying to learn this stuff to apply it.
    I've basically hit a wall... any help again would be greatly appreciated
     
    pistonpunch, Oct 26, 2007 IP
  2. Mike H.

    Mike H. Peon

    Messages:
    219
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #2 
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Any Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

	function calc(nForm){

		var value1 = Number(nForm['v1'].value);
		var value2 = Number(nForm['v2'].value);
		var nOperator = nForm['operation'];
		for (i=0; i<nOperator.length; i++)
			{
			 if (nOperator[i].checked)
				{
				 var operation = nOperator[i].value;
				}
			}
		var nResult = 0;
		switch (operation)
			{
			 case "+": 
  			 	nResult = value1 + value2 
  			 break;
			 case "-": 
  				nResult = value1 - value2 
 			 break
			 case "*": 
  				nResult = value1 * value2 
 			 break
			 case "/": 
  				nResult = value1 / value2 
 			 break
			}		
		nForm['result'].value = nResult.toFixed(3);
	}

	
</script>
<style type="text/css">

	body {background-color:#eae3c6;margin-top:60px}
	form {width:640px;margin:auto;font-family:times;font-size:12pt}
	fieldset {width:640px;background-color:#f0fff0;border:1px solid #87ceeb}
	legend {font-family:times;font-size:14pt;color:#00008b;background-color:#87ceeb;padding-left:3px;padding-right:3px;margin-bottom:5px}
 	.operator {font-family:"arial black";font-size:12pt;padding-left:12px;padding-right:0px;position:relative;top:-2px}
	.user_input {margin-left:10px;margin-right:10px;text-align:right;}
	.equal_sign {font-family:"arial black";font-size:12pt;color:#4169e1;cursor:pointer;}
	.reset_btn {font-family:tahoma;font-size:10pt;display:block;margin-left:auto;margin-right:auto;margin-top:10px;margin-bottom:5px}

</style>
</head>
	<body>
		<form action="">
		   <fieldset>
			<legend>Form</legend>
				
				<input type="text" name="v1" size="12" class="user_input">

				<label class="operator">+</label><input type="radio" name="operation" value="+" checked>
				<label class="operator">&ndash;</label><input type="radio" name="operation" value="-">
				<label class="operator">&times;</label><input type="radio" name="operation" value="*">
				<label class="operator">&divide;</label><input type="radio" name="operation" value="/">

				<input type="text" name="v2" size="12" class="user_input">
				
				<label onclick="calc(this.form);return false" class="equal_sign">&nbsp;&nbsp;&nbsp;=&nbsp;&nbsp;&nbsp;</label>
				<input type="text" name="result" size="15" class="user_input" readonly>				
				
				<input type="reset" value="Reset" class="reset_btn">
		   </fieldset>
		</form>
	</body>
</html>
    Code (markup):
     
    Mike H., Oct 26, 2007 IP
  3. Mike H.

    Mike H. Peon

    Messages:
    219
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #3
    EDIT: Changed the form/fieldset width to 640px;
     
    Mike H., Oct 26, 2007 IP
  4. pistonpunch

    pistonpunch Peon

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Wow. Mike..I must say, thanks & I am impressed!!

    I am looking at the code & wondering... if we just were to use my table I provided up top & eliminate all the styles.. just so I can understand a little easier. Its a little overwhelming , just because I am such a beginner.
    & would like & try to make the "=" a button , like in my code.

    I really appreciate you taking the time to lend me a hand. I just need to try I see it as bare bones as possible , so I can wrap my head around what were doing exactly..thanks again mike,... if you ever need any graphic help..lemme know :)
     
    pistonpunch, Oct 26, 2007 IP
  5. Mike H.

    Mike H. Peon

    Messages:
    219
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #5
    The code is what it is.

    I know you are a student, but you should never use tables in forms. Never. In that sense, it is "bare bones." If you can't understand one function and one onclick -- I can't help you.

    You stated the problem and the desired outcome was to click the equal sign to cause the calculation. Solved.

    Are you copying EVERYTHING I posted and then saving it as an .html document?

    Maybe you don't know how to do that. Now you do.

    I'm not going to customize homework. It is what it is.
     
    Mike H., Oct 26, 2007 IP
  6. pistonpunch

    pistonpunch Peon

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    no no.. not at all... I am just trying to solve doing this in the least amount of steps as possible.
    I appreciate what you have done,... this is not an assignment.. this is for me to grasp how this works. I see you used switch statement , I was just curious, the way I set this up using the actual radio buttons as the calculation method built in does it in a few less steps (but it wasnt my final result I was hoping for) & I guess I didnt realize I needed to set it up quite this way. I am going to take a much closer look at this and try to figure it out.
    again, thanks for your time
     
    pistonpunch, Oct 26, 2007 IP