Question

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

我的代码可以提交数字并获得答案，但仅适用于最后一个复选框（在这种情况下是＆＃39;减去＆＃39;）无论哪个收音机，答案都不会改变按钮被选中。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

更简单地通过arithmetic functions ("calculate").onclick这样应用{/ 1}}：

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>

更改复选框不会影响javascript

1 个答案: