0
我正在从事一个网页设计项目，我们必须制作一个“计算器”（除了我的教授实际上需要两个输入框，算术运算符的单选按钮和一个提交按钮。）更改复选框不影响javascript
我的代码的工作原理与提交数字和获得答案一样，但仅适用于最后一个复选框（在此情况下为“减去”），并且不管选中哪个单选按钮，答案都不会更改。
我真的是JavaScript的初学者，所以我觉得真的很明显，我失踪了？任何帮助是极大的赞赏。
//arithmetic functions
\t \t var calculate_divide = function() {
\t \t \t var num1 = parseFloat(document.getElementById('first_number').value);
\t \t \t var num2 = parseFloat(document.getElementById('second_number').value);
\t \t
\t \t \t document.getElementById('total').value = (num1/num2).toFixed(2);
\t \t }
\t \t
\t \t var calculate_multiply = function() {
\t \t \t var num1 = parseFloat(document.getElementById('first_number').value);
\t \t \t var num2 = parseFloat(document.getElementById('second_number').value);
\t \t
\t \t \t document.getElementById('total').value = (num1*num2).toFixed(2);
\t \t }
\t \t
\t \t var calculate_add = function() {
\t \t \t var num1 = parseFloat(document.getElementById('first_number').value);
\t \t \t var num2 = parseFloat(document.getElementById('second_number').value);
\t \t
\t \t \t document.getElementById('total').value = (num1 + num2).toFixed(2);
\t \t }
\t \t
\t \t var calculate_subtract = function() {
\t \t \t var num1 = parseFloat(document.getElementById('first_number').value);
\t \t \t var num2 = parseFloat(document.getElementById('second_number').value);
\t \t
\t \t \t document.getElementById('total').value = (num1 - num2).toFixed(2);
\t \t }
// if-else for checked boxes on submit
\t \t window.onload = function() {
\t \t
\t \t \t if(document.getElementById('divide').checked){
\t \t \t \t document.getElementById('calculate').onclick = calculate_divide;
\t \t \t } else if(document.getElementById('multiply').checked){
\t \t \t \t document.getElementById('calculate').onclick = calculate_multiply;
\t \t \t } else if(document.getElementById('add').checked){
\t \t \t \t document.getElementById('calculate').onclick = calculate_add;
\t \t \t } else if(document.getElementById('subtract').checked){
\t \t \t \t document.getElementById('calculate').onclick = calculate_subtract;
\t \t \t }
\t \t }<body>
\t <form name="calc">
\t <div id="calculator">
\t \t <div id="dispCont">
\t \t \t <input type="text" class="display" name="first_number" id="first_number" placeholder="First Number">
\t \t \t <input type="text" class="display" name="second_number" id="second_number" placeholder="Second Number">
\t \t </div>
\t \t
\t \t <div class="mathOp"><input type="radio" name="mathOp" id="divide" value="/" checked='checked'>/</div>
\t \t <div class="mathOp"><input type="radio" name="mathOp" id="multiply" value="*" checked='checked'>*</div>
\t \t <div class="mathOp"><input type="radio" name="mathOp" id="add" value="+" checked='checked'>+</div>
\t \t <div class="mathOp"><input type="radio" name="mathOp" id="subtract" value="-" checked='checked'>–</div>
\t \t
\t \t
\t \t <div class="buttons">
\t \t \t <input class="calcOpEq" type="button" id="calculate" name="calculate" value="=" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)">
\t \t \t <input type="text" class="display" name="total" id="total" placeholder="Total">
\t \t </div>
\t </div>
\t </form>
</body>
页面加载你的'calculate_subtract'功能结合到点击按钮的事件。另外，document.calculator.ans.value应该用于什么？ – j08691
您正在测试哪个按钮仅在页面加载时被选中。这只会执行一次，当您更改选择时不会发生任何事情。按下计算按钮时测试单选按钮会更好。 – Shovalt