更改复选框不影响javascript

我正在做一个网页设计项目，我们必须制作一个"计算器"（除了我的教授实际上想要两个输入框、算术运算符的单选按钮和一个提交按钮。）

我的代码可以提交数字并得到答案，但只适用于最后一个复选框（在这种情况下是"减法"），无论选中哪个单选按钮，答案都不会改变。

我真的是Javascript的初学者，所以我觉得我错过了一些非常明显的东西？？非常感谢您的帮助。

//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>

更简单的方法是通过("calculate").onclick应用arithmetic functions，如下所示：

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>

相关内容

最新更新

热门标签：