如何克服javascript中的未定义错误

How to overcome undefined error in javascript

本文关键字:未定义 错误 javascript 何克服 克服      更新时间:2023-09-26

这是我的代码。你也可以在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>

在运行它的过程中,我得到了所有四个操作的未定义错误。如果用户输入了这两个值,并且单击了所有复选框,则应该显示与算术运算相对应的所有输出。如何做到这一点?

您不会在代码中的任何位置调用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>

希望这能有所帮助。