使用单选按钮计算器

时间:2014-03-10 19:54:21

标签: javascript html radio-button calculator

我正在尝试使用单选按钮创建一个简单的计算器来选择加法,减法,乘法或除法。但它不起作用。我已经尝试了很多东西并且搜索了很多东西,但是我找不到问题。如果有人发现我的问题,请你给我一个解决方案。谢谢!

<html>
    <head>
    <script language="javascript">
        function operation() {
            var ans =document.getElementById("answer").value;
            if (document.getElementById("add").value = "add") {
                ans= calculate(add);
            }
            if (document.getElementById("subtract").value = "subtract") {
                ans= calculate(subtract);
            }
            if (document.getElementById("multiply").value = "multiply") {
                ans= calculate(multiply);
            }
            if (document.getElementById("divide").value = "divide") {
                ans= calculate(divide);
            }
        }
        function calculate(action){
            var num1 = document.getElementById("num1").value;
            var num2 = document.getElementById("num2").value;
            var result;
            switch(action){
            case add:
                result= parseInt(num1)+parseInt(num2);
            break;
            case subtract:
                result= num1-num2;
            break;
            case multiply:
                result= num1*num2;
            break;
            case divide:
                result= num1/num2;
            break;
        }

        return result;
    </script>
    <title>
    Calculator
    </title>
</head>
<body>
    <form>
        <input type="text" id="num1">
        +<input type="radio" name="group1" id="add" value="add">
        -<input type="radio" name="group1" id="subtract" value="subtract">
        *<input type="radio" name="group1" id="multiply" value="multiply">
        /<input type="radio" name="group1" id="divide" value="divide">
        <input type="text" id="num2">
        =
        <input type="text" id="answer" readonly>
        <input type="button" value="Calculate" onClick="calculate()">
        </form>
</body>
</html>

3 个答案:

答案 0 :(得分:3)

您的calculate函数需要参数:

function calculate(action){}

你在没有通过任何参数的情况下调用它:

<input type="button" value="Calculate" onClick="calculate()">

实际上,我在几天前将此FIDDLE作为某人问题的答案。这是某种功课吗?

function operation() {
var ans =document.getElementById("answer");
if (document.getElementById("add").checked) {
    ans.value= calculate('add');
}
if (document.getElementById("subtract").checked) {
    ans.value= calculate('subtract');
}
if (document.getElementById("multiply").checked) {
    ans.value= calculate('multiply');
}
if (document.getElementById("divide").checked) {
    ans.value= calculate('divide');
}
}
function calculate(action){
        var num1 = document.getElementById("num1").value;
        var num2 = document.getElementById("num2").value;
        var result;
        switch(action){
            case 'add':
                result= parseInt(num1)+parseInt(num2);
                break;
            case 'subtract':
                result= num1-num2;
                 break;
            case 'multiply':
                result= num1*num2;
                 break;
            case 'divide':
                result= num1/num2;
                 break;
        }
        return result;
    }

fiddle

答案 1 :(得分:1)

您没有将结果放回答案框。您可以返回值,但必须告诉它使用哪个文本元素。

document.getElementById(“answer”)。value = ans;

在你的if语句中......“=”表示分配。 “==”是比较。

您已将每个单选按钮的“值”设置为某个值。因此,您要检查“add”的值是否为“add”,但您已经将值显式设置为“add”。单选按钮是布尔值:true或false。

function op() {
var ans = 0;
if (document.getElementById("add").value) {
    ans= calculate(add);
} else if (document.getElementById("subtract").value) {
    ans= calculate(subtract);
} else if (document.getElementById("multiply").value) {
    ans= calculate(multiply);
} else if (document.getElementById("divide").value) {
    ans= calculate(divide);
}
document.getElementById("answer").value = ans;
}

function calculate(action){
var num1 = document.getElementById("num1").value;
var num2 = document.getElementById("num2").value;
var result;
switch(action){
    case add:
        result= parseInt(num1)+parseInt(num2);
        break;

    case subtract:
        result= num1-num2;
        break;

    case multiply:
        result= num1*num2;
        break;

    case divide:
        result= num1/num2;
        break;
}
return result;
}

<input type="button" value="Calculate" id="b" onclick="op();">

答案 2 :(得分:0)

您正在查看按钮的值以查看它们是否处于活动状态。无论是否检查,它们都将始终具有分配给它们的值。

if (document.getElementById("add").value = "add") {

......当你应该检查它们是否被检查时。

if (document.getElementById("add").getAttribute("checked") == "checked") {

此外,在JavaScript中使用“==”进行比较,“=”用于指定值。