CODEWITHSUNDEEP
javascripthtmlradio-buttoncalculator
dj0965
dj0965

Reputation: 135

Using radio buttons for a calculator

I am trying to make a simple calculator using radio buttons to select addition, subtraction, multiplication or division. However it is not working. I have tried a lot of things and googled it a lot, but I can't find out the issue. If anyone finds a problem with what I have, could you please give me a solution. Thanks!

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

Upvotes: 0

Views: 8970

Answers (3)

Jason Maggard
Jason Maggard

Reputation: 1672

You're not putting the result back into the answer box. You can return the value, but you have to tell it what text element to use.

document.getElementById("answer").value = ans;

In your if statements... "=" means assignment. "==" is comparison.

You have set the "value" of each radio button to something. So, you're checking if the value for "add" is "add", but you have already explicitly set the value to "add". Radio buttons are boolean: true or 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();">

Upvotes: 1

T J
T J

Reputation: 43166

Your calculate function takes an argument:

function calculate(action){}

You are calling it without passing any paremeters:

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

actually, i made this FIDDLE as the answer for someone's question few days ago. Is this some sort of homework?

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

Upvotes: 3

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114437

You are looking at the values of buttons to see if they are active. They will always have the value that is assigned to them whether they are checked or not.

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

...when you should be checking to see if they're checked.

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

Also, in JavaScript "==" is used for comparison, "=" is used to assign a value.

Upvotes: 0

Related Questions