CODEWITHSUNDEEP
javascripthtml
A.Manuel
A.Manuel

Reputation: 19

Changing checkbox not affecting javascript

I'm working on a web design project where we have to make a "calculator" (except my prof actually wants two input boxes, radio buttons for arithmetic operators, and a submit button.)

My code works as far as submitting numbers and getting an answer, but only for the last checkbox (which is 'subtract' in this case) and the answer doesn't change no matter which radio button is checked.

I'm really beginner at Javascript so I feel like there's something really obvious that I'm missing?? Any help is greatly appreciated.

//arithmetic functions
		var calculate_divide = function() {
			var num1 = parseFloat( document.getElementById('first_number').value);
			var num2 = parseFloat( document.getElementById('second_number').value);
		
			document.getElementById('total').value = (num1 / num2).toFixed(2);
		}
		
		var calculate_multiply = function() {
			var num1 = parseFloat( document.getElementById('first_number').value);
			var num2 = parseFloat( document.getElementById('second_number').value);
		
			document.getElementById('total').value = (num1*num2).toFixed(2);
		}
		
		var calculate_add = function() {
			var num1 = parseFloat( document.getElementById('first_number').value);
			var num2 = parseFloat( document.getElementById('second_number').value);
		
			document.getElementById('total').value = (num1 + num2).toFixed(2);
		}
		
		var calculate_subtract = function() {
			var num1 = parseFloat( document.getElementById('first_number').value);
			var num2 = parseFloat( document.getElementById('second_number').value);
		
			document.getElementById('total').value = (num1 - num2).toFixed(2);
		}
        
// if-else for checked boxes on submit        
		window.onload = function () {
		
			if(document.getElementById('divide').checked){
				document.getElementById('calculate').onclick = calculate_divide;
			} else if(document.getElementById('multiply').checked){
				document.getElementById('calculate').onclick = calculate_multiply;
			} else if(document.getElementById('add').checked){
				document.getElementById('calculate').onclick = calculate_add;
			} else if(document.getElementById('subtract').checked){
				document.getElementById('calculate').onclick = calculate_subtract;
			}
		}
<body>
	<form name="calc">
	<div id="calculator">
		<div id="dispCont">
			<input type="text" class="display" name="first_number" id="first_number" placeholder="First Number">
			<input type="text" class="display" name="second_number" id="second_number" placeholder="Second Number">
		</div>
		
		<div class="mathOp"><input type="radio" name="mathOp" id="divide" value="/" checked='checked'>/</div>
		<div class="mathOp"><input type="radio" name="mathOp" id="multiply" value="*" checked='checked'>*</div>
		<div class="mathOp"><input type="radio" name="mathOp" id="add" value="+" checked='checked'>+</div>
		<div class="mathOp"><input type="radio" name="mathOp" id="subtract" value="-" checked='checked'>&ndash;</div>
		
		
		<div class="buttons">
			<input class="calcOpEq" type="button" id="calculate" name="calculate" value="=" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)">
			<input type="text" class="display" name="total" id="total" placeholder="Total">
		</div>
	</div>
	</form>


</body>

Upvotes: 0

Views: 84

Answers (1)

Shady Alset
Shady Alset

Reputation: 5714

More simply way by applying your arithmetic functions by ("calculate").onclick like this:

document.getElementById("calculate").onclick = function() {
    var num1 = parseFloat( document.getElementById('first_number').value);
    var num2 = parseFloat( document.getElementById('second_number').value);        
  if(document.getElementById('divide').checked){
    document.getElementById('total').value = (num1 / num2).toFixed(2);
  } else if(document.getElementById('multiply').checked){
    document.getElementById('total').value = (num1*num2).toFixed(2);
  } else if(document.getElementById('add').checked){
    document.getElementById('total').value = (num1 + num2).toFixed(2);
  } else if(document.getElementById('subtract').checked){
    document.getElementById('total').value = (num1 - num2).toFixed(2);
  }
}
<form name="calc">
    <div id="calculator">
        <div id="dispCont">
            <input type="text" class="display" name="first_number" id="first_number" placeholder="First Number">
            <input type="text" class="display" name="second_number" id="second_number" placeholder="Second Number">
        </div>
        <div class="mathOp"><input type="radio" name="mathOp" id="divide" value="/" checked='checked'>/</div>
        <div class="mathOp"><input type="radio" name="mathOp" id="multiply" value="*" checked='checked'>*</div>
        <div class="mathOp"><input type="radio" name="mathOp" id="add" value="+" checked='checked'>+</div>
        <div class="mathOp"><input type="radio" name="mathOp" id="subtract" value="-" checked='checked'>&ndash;</div>
        <div class="buttons">
            <input class="calcOpEq" type="button" id="calculate" name="calculate" value="=" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)">
            <input type="text" class="display" name="total" id="total" placeholder="Total">
        </div>
    </div>
</form>

Upvotes: 1

Related Questions