Question

当我收到用户输入并单击“提交”时，它显示x = undefined。如何解决这个问题？这是我的代码。或http://jsfiddle.net/L9LKc/

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JS Assignment</title>
        <script>
        function changeCheckBox() {
     try {

         var max = document.myform.check.length;
         var count = 0;

         for (var i = 0; i < max; i++) {
             if (document.myform.check[i].checked == true) {
                 count++;
                 serNoChecked = i;
             }
         }
         if (count == 1) {
             for (var i = 0; i < max; i++) {
                 if (document.myform.check[i].checked == false) {
                     document.myform.check[i].disabled = true;
                 }
             }
         } else if (count == 0) {
             for (var 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);
     }
 }
 </script>
 <script>
    function arith(op) {
    var n1 = parseInt(document.getElementById('num1').value,10);
    var n2 = parseInt(document.getElementById('num2').value,10);
    var newVal;
    if (op == "Addition") {
        newVal = n1+n2;
    } else if (op == "Subtraction") {
        newVal = n1-n2;
    } else if (op == "Multiplication") {
        newVal = n1*n2;
    } else if (op == "Division") {
        newVal = n1/n2;
    }

    var demoP=document.getElementById("demo")
    demoP.innerHTML="x=" + newVal;
}
</script>
    </head>
    <body background="photo.jpg">
        <h3>Simple JavaScript Arithmetic Operations</h3>
        <form name="myform" method="post" onsubmit="return arith()">
        Value 1 <input type ="text" id="num1"> <br><br>
        Value 2 <input type="text" id="num2"> <br><br>
        <input type="checkbox" name="check" value="Addition" id="check1" onclick="changeCheckBox(this.value)">Addition<br>
        <input type="checkbox" name="check" value="Subtraction" id="check2" onclick="changeCheckBox(this.value)">Subtraction<br>
        <input type="checkbox" name="check" value="Multiplication" id="check3" onclick="changeCheckBox(this.value)">Multiplication<br>
        <input type="checkbox" name="check" value="Division" id="check4" onclick="changeCheckBox(this.value)">Division<br><br>
        <input type="submit" value="Submit">
        </form>
        <p id="demo"></p>
    </body>
</html>

Answer 1

有很多错误，最重要的是你永远不会分配op。我修好了（快速又脏）：

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 newVal;
    if (op == "Addition") {
        newVal = n1 + n2;
    } else if (op == "Subtraction") {
        newVal = n1 - n2;
    } else if (op == "Multiplication") {
        newVal = n1 * n2;
    } else if (op == "Division") {
        newVal = n1 / n2;
    }

    var demoP = document.getElementById("demo");
    demoP.innerHTML = "x=" + newVal;
    return false;
}

小提琴：http://jsfiddle.net/Qr7U8/

Answer 2

＆＃34;返回arith（）＆＃34;，所以没有＆＃34; op＆＃34;在arith（op）中传递的值，并且op === undefined。

您需要为op：

获取正确的值

function getCheckedValue() {
    var checks = document.myform.check;

    for (var i = 0, len = checks.length; i < len; i++) {
    if (checks[i].checked) return checks[i].value;
    }

    return false;
}

在函数arith（op）中：

function arith(op) {

    op = op || getCheckedValue();
        ....

http://jsfiddle.net/rooseve/L9LKc/8/

Answer 3

您未定义，因为如果您直接点击提交而不检查任何操作，则不会计算x。

添加

else
{
    alert("Check at least one operation");
}

参与你的if else。

查看更新的fiddle。因此，如果未选择任何操作，它将显示警告，并且不会给出未定义的错误。

希望这有帮助。

P.S：你应该把它们变成单选按钮而不是复选框。

您正在调用方法arith()而不向其传递参数。所以op每次都是null。因此它显示警觉。

如何在javascript中摆脱x = undefined

3 个答案: