Changing checkbox not affecting javascript

Question

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>

When the page loads you bind the calculate_subtract function to the click event of the button. Also, what's document.calculator.ans.value supposed to work with? — j08691
– j08691, Commented Apr 29, 2016 at 18:59
You are testing which button is checked only when the page is loaded. This is performed only once, and nothing happens when you change the selection. It's better to test the radio buttons when the calculate button is pressed. — Shovalt
– Shovalt, Commented Apr 29, 2016 at 19:00

Shady Alset · Accepted Answer · 2016-04-29 19:18:53Z

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>

that sets a better example, remember the copy paste people might be your teammate someday ... you want them at least copying pasting code as far from entropy as possible.

Collectives™ on Stack Overflow

Changing checkbox not affecting javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related