这是我的代码。您也可以在a jsfiddle找到它。
<form name="myform" method="post" onsubmit="return arith()">
<center><table>
<tr><td><font face="verdana,arial" size=-1>Value 1 </font></td><td><input type = "text" id = "num1"></td></tr>
<tr><td><font face="verdana,arial" size=-1>Value 2 </font></td><td><input type = "text" id = "num2"></td></tr>
<tr><td><font face="verdana,arial" size=-1></font></td><td><input type="checkbox" name="check" value="Addition" id="check1"/>Addition</td></tr>
<tr><td><font face="verdana,arial" size=-1></font></td><td><input type="checkbox" name="check" value="Subtraction" id="check2"/>Subtraction</td></tr>
<tr><td><font face="verdana,arial" size=-1></font></td><td><input type="checkbox" name="check" value="Multiplication" id="check3"/>Multiplication</td></tr>
<tr><td><font face="verdana,arial" size=-1></font></td><td><input type="checkbox" name="check" value="Division" id="check4"/>Division</td></tr>
<tr><td><font face="verdana,arial" size=-1></font></td><td><font face="verdana,arial" size=-1><input type = "submit" value = "Submit"></font></td></tr>
</table></center>
</form>
<p id="demo"></p>
Javascript代码:
<script>
var op;
function changeCheckBox(val) {
try {
var i;
var max = document.myform.check.length;
var count = 0;
op = val;
for (i = 0; i < max; i++) {
if (document.myform.check[i].checked === true) {
count++;
serNoChecked = i;
}
}
if (count === 1) {
for (i = 0; i < max; i++) {
if (document.myform.check[i].checked === false) {
document.myform.check[i].disabled = true;
}
}
} else if (count === 0) {
for (i = 0; i < max; i++) {
document.myform.check[i].disabled = false;
}
}
if (null === max) return false;
if (count === 0) {
return true;
} else if (count > 0) {
return false;
}
} catch (e) {
alert(e.message);
}
}
function arith() {
var n1 = parseInt(document.getElementById('num1').value, 10);
var n2 = parseInt(document.getElementById('num2').value, 10);
var newVal1;
var newVal2;
var newVal3;
var newVal4;
if (op == "Addition") {
newVal1 = n1 + n2;
} else if (op == "Subtraction") {
newVal2 = n1 - n2;
} else if (op == "Multiplication") {
newVal3 = n1 * n2;
} else if (op == "Division") {
newVal4 = n1 / n2;
}
var demoP = document.getElementById("demo");
{
var html = "";
html += "Addition =" + newVal1 + "<br/>";
html += "Subtraction =" + newVal2 + "<br/>";
html += "Multiplication =" + newVal3 + "<br/>";
html += "Division =" + newVal4 + "<br/>";
demoP.innerHTML = html;
}
return false;
}
</script>
运行它时,我收到所有四个操作的未定义错误。 如果用户输入这两个值,并且如果他们单击所有复选框,则应显示与算术运算相对应的所有输出。怎么做?
答案 0 :(得分:1)
您没有在代码中的任何位置调用changeCheckBox
,因此永远不会设置op
。也许你的意思是每个复选框都有onchange="changeCheckBox(this.value);"
(通过此更改,您的代码似乎按预期工作)?
<form name="myform" method="post" onsubmit="return arith()">
<center><table>
<tr><td><font face="verdana,arial" size=-1>Value 1 </font></td><td><input type = "text" id = "num1"></td></tr>
<tr><td><font face="verdana,arial" size=-1>Value 2 </font></td><td><input type = "text" id = "num2"></td></tr>
<tr><td><font face="verdana,arial" size=-1></font></td><td><input type="checkbox" name="check" value="Addition" id="check1" onchange="changeCheckBox(this.value);" />Addition</td></tr>
<tr><td><font face="verdana,arial" size=-1></font></td><td><input type="checkbox" name="check" value="Subtraction" id="check2" onchange="changeCheckBox(this.value);" />Subtraction</td></tr>
<tr><td><font face="verdana,arial" size=-1></font></td><td><input type="checkbox" name="check" value="Multiplication" id="check3" onchange="changeCheckBox(this.value);" />Multiplication</td></tr>
<tr><td><font face="verdana,arial" size=-1></font></td><td><input type="checkbox" name="check" value="Division" id="check4" onchange="changeCheckBox(this.value);" />Division</td></tr>
<tr><td><font face="verdana,arial" size=-1></font></td><td><font face="verdana,arial" size=-1><input type = "submit" value = "Submit"></font></td></tr>
</table></center>
</form>
希望这有帮助。