如何在javascript中驾驭x=undefined

How to get ride of x=undefined in javascript

本文关键字：undefined 驾驭 javascript      更新时间：2023-09-26

当我得到用户输入并点击提交时，它显示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>

有很多错误，最重要的是从未分配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;
}

Fiddle：http://jsfiddle.net/Qr7U8/

"return arith（）"，所以在arith（op）中没有传递"op"值，并且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/

您得到了未定义，因为如果您在不检查任何操作的情况下直接单击Submit，它将不会计算x。

添加

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

参与你的if-else。

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

希望这能有所帮助。

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

并且您在调用方法arith()时没有向其传递参数。因此，op每次都为null。因此，它表现出警觉。

相关文章：