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>
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>
3 Answers
Reset to default 3Your 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
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 parison.
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();">
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 parison, "=" is used to assign a value.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744798637a4594357.html
评论列表（0条）