为什么我未定义功能?

时间:2020-05-21 16:53:48

标签: javascript html css

我的html代码是:-

com_hrd.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="com_hrd.css" />
    <title>GUESS</title>
    <script type="text/javascript" src="com_hrd.js"></script>
  </head>
  <body>
    <h1 id="a1">GUESS</h1>
    <h1 id="a2">_Hard</h1>
    <h2 id="a3">Hello <span id="res1"></span></h2>
    <div class="hr2"></div>

    <button type="submit" id="f1" onclick="msg()">
      Generate
    </button>

    <div id="res5"></div>
    <div id="res6"></div>
    <div id="res"></div>

    <h2 id="a3_1">Enter Your Lucky Number></h2>
    <h2 id="a3_2">To Start Game:=></h2>

    <div id="snackbar">
      Number generated...Enter the Number
    </div>

    <input type="number" id="a4" />

    <button
      type="submit"
      id="a5"
      onclick="cal(document.getElementById('a4').value)"
    >
      Check
    </button>
  </body>
</html>

com_hrd.js

document.getElementById("res1").innerHTML = localStorage.getItem("textvalue3");
function generate() {
    var N = Math.floor(Math.random() * 100) + 1;
    return N;
}
function msg() {
    var x = document.getElementById("snackbar");
    x.className = "show";
    setTimeout(function () { x.className = x.className.replace("show", ""); }, 3000);
}
var Num = generate();

function cal(a) {
    N1 = a;
    // N1 = parseInt(document.getElementById("a4").value);
    if (N1 == Num) {
        document.getElementById("res").innerHTML = "BINGO!!! You Won!! \n Reload the Page \n To play Again";
        break;



    }
    else {
        l1 = [];
        a1 = N1.toString();
        for (var i = 0, len = a1.length; i < len; i += 1) {
            l1.push(+a1.charAt(i));
        }
        l2 = [];
        a2 = Num.toString();
        for (var j = 0, len = a2.length; j < len; j += 1) {
            l2.push(+a2.charAt(j));
        }
        if (l2.length == 1) {
            if (l1.length == 2) {
                if (l1[0] == l2[0] & l1[1] != l2[0]) {
                    document.getElementById("res").innerHTML = "Numbers Matched: 1\nPosition Matched: 1";
                }
                else if (l1[1] == l2[0] & l1[0] != l2[0]) {
                    document.getElementById("res").innerHTML = "Numbers Matched: 1\nPosition Matched: 0";
                }
                else if (l1[0] == l2[0] & l1[1] == l2[0]) {
                    document.getElementById("res").innerHTML = "Numbers Matched: 1\nPosition Matched: 0";
                }
                else {
                    document.getElementById("res").innerHTML = "Numbers Matched: 0\nPosition Matched: 0";
                }
            }
            else if (l1[0] != l2[0]) {
                document.getElementById("res").innerHTML = "Numbers Matched: 0\nPosition Matched: 0";
            }
        }
        else if (l2.length == 2 & l1.length == l2.length) {
            if (l1[0] == l2[0] | l1[1] == l2[1]) {
                document.getElementById("res").innerHTML = "Numbers Matched: 1\nPosition Matched: 0";
            }
            else if (l1[0] == l2[1] & l1[1] == l2[0]) {
                document.getElementById("res").innerHTML = "Numbers Matched: 2\nPosition Matched: 0";
            }
            else if (l1[0] == l2[1] | l1[1] == l2[0]) {
                document.getElementById("res").innerHTML = "Numbers Matched: 1\nPosition Matched: 0";
            }
            else {
                document.getElementById("res").innerHTML = "Numbers Matched: 0\nPosition Matched: 0";
            }
        }
        else if (l1.length == 2 & l1.length > l2.length) {
            if (l1[0] == l2[0] & l1[1] != l2[0]) {
                document.getElementById("res").innerHTML = "Numbers Matched: 1\nPosition Matched: 1";
            }
            else if (l1[1] == l2[0] & l1[0] != l2[0]) {
                document.getElementById("res").innerHTML = "Numbers Matched: 1\nPosition Matched: 0";
            }
        }
        else if (l2.length == 2 & l1.length < l2.length) {
            if (l1[0] == l2[0]) {
                document.getElementById("res").innerHTML = "Numbers Matched: 1\nPosition Matched: 1";
            }
            else if (l1[0] == l2[1]) {
                document.getElementById("res").innerHTML = "Numbers Matched: 1\nPosition Matched: 0";
            }
            else if (l1[0] != l2[0] & l1[0] != l2[1]) {
                document.getElementById("res").innerHTML = "Numbers Matched: 0\nPosition Matched: 0";
            }

        }

    }

}

当我单击检查按钮时,必须调用 cal()函数。但是它显示以下错误:

Uncaught ReferenceError: cal is not defined
    at HTMLButtonElement.onclick (com_hrd.html:36)

我无法解决。实际上,该按钮应该起作用。而且我应该能够看到我给的句子“数字位置”。但是不知道为什么它不起作用。

3 个答案:

答案 0 :(得分:1)

return函数中写入break而不是cal()。它是非法使用。

if (N1 == Num) {
    document.getElementById("res").innerHTML = "BINGO!!! You Won!! \n Reload the Page \n To play Again";
    return;
}

答案 1 :(得分:1)

该函数中有一个非法的break语句,但这不能解释您得到的错误。您的环境肯定有其他问题。我将检查以确保您的JS文件实际上位于HTML引用的位置。工作提琴供参考(固定了非法中断):https://jsfiddle.net/keegangbrown/deapmrjo/

$curl = curl_init();
curl_setopt_array($curl, array(
  CURLOPT_URL => "https://logix-testing.myshopify.com/admin/api/2020-04/orders/2279798145083/fulfillments.json",
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_FOLLOWLOCATION => true,
  CURLOPT_CUSTOMREQUEST => "POST",
  CURLOPT_POSTFIELDS =>"{\n  \"fulfillment\": {\n    \"location_id\": 905684977,\n    \"tracking_number\": \"123456789\",\n    \"tracking_urls\": [\n      \"https://shipping.xyz/track.php?num=123456789\",\n      \"https://anothershipper.corp/track.php?code=abc\"\n    ],\n    \"notify_customer\": true\n  }\n}\n",
  CURLOPT_HTTPHEADER => array(
    "X-Shopify-Access-Token: shpat_XXXXXXXX84bf9870369c0",
    "Content-Type: application/json",

  ),
));
$response = curl_exec($curl);
curl_close($curl);
echo $response;
<h1 id="a1">GUESS</h1>
    <h1 id="a2">_Hard</h1>
    <h2 id="a3">Hello <span id="res1"></span></h2>
    <div class="hr2"></div>

    <button type="submit" id="f1" onclick="msg()">
      Generate
    </button>

    <div id="res5"></div>
    <div id="res6"></div>
    <div id="res"></div>

    <h2 id="a3_1">Enter Your Lucky Number></h2>
    <h2 id="a3_2">To Start Game:=></h2>

    <div id="snackbar">
      Number generated...Enter the Number
    </div>

    <input type="number" id="a4" />

    <button
      type="submit"
      id="a5"
      onclick="cal(document.getElementById('a4').value)"
    >
      Check
    </button>

答案 2 :(得分:1)

在除去放错位置的break并注释掉引发安全性错误的localstorage语句之后,此代码似乎可以正常工作。我将该值硬编码为99进行测试...尝试在下面运行它。

//document.getElementById("res1").innerHTML = localStorage.getItem("textvalue3");
function generate() {
    var N = Math.floor(Math.random() * 100) + 1;
    //return N
    return 99;
}
function msg() {
    var x = document.getElementById("snackbar");
    x.className = "show";
    setTimeout(function () { x.className = x.className.replace("show", ""); }, 3000);
}
var Num = generate();

function cal(a) {
    N1 = a;
    if (N1 == Num) {
        document.getElementById("res").innerHTML = "BINGO!!! You Won!! \n Reload the Page \n To play Again";
        console.log('BINGO');


    }
    else {
        l1 = [];
        a1 = N1.toString();
        for (var i = 0, len = a1.length; i < len; i += 1) {
            l1.push(+a1.charAt(i));
        }
        l2 = [];
        a2 = Num.toString();
        for (var j = 0, len = a2.length; j < len; j += 1) {
            l2.push(+a2.charAt(j));
        }
        if (l2.length == 1) {
            if (l1.length == 2) {
                if (l1[0] == l2[0] & l1[1] != l2[0]) {
                   document.getElementById("res").innerHTML = "Numbers Matched: 1\nPosition Matched: 1";
                }
                else if (l1[1] == l2[0] & l1[0] != l2[0]) {
                    document.getElementById("res").innerHTML = "Numbers Matched: 1\nPosition Matched: 0";
                }
                else if (l1[0] == l2[0] & l1[1] == l2[0]) {
                    document.getElementById("res").innerHTML = "Numbers Matched: 1\nPosition Matched: 0";
                }
                else {
                    document.getElementById("res").innerHTML = "Numbers Matched: 0\nPosition Matched: 0";
                }
            }
            else if (l1[0] != l2[0]) {
                document.getElementById("res").innerHTML = "Numbers Matched: 0\nPosition Matched: 0";
            }
        }
        else if (l2.length == 2 & l1.length == l2.length) {
            if (l1[0] == l2[0] | l1[1] == l2[1]) {
                document.getElementById("res").innerHTML = "Numbers Matched: 1\nPosition Matched: 0";
            }
            else if (l1[0] == l2[1] & l1[1] == l2[0]) {
                document.getElementById("res").innerHTML = "Numbers Matched: 2\nPosition Matched: 0";
            }
            else if (l1[0] == l2[1] | l1[1] == l2[0]) {
                document.getElementById("res").innerHTML = "Numbers Matched: 1\nPosition Matched: 0";
            }
            else {
                document.getElementById("res").innerHTML = "Numbers Matched: 0\nPosition Matched: 0";
            }
        }
        else if (l1.length == 2 & l1.length > l2.length) {
            if (l1[0] == l2[0] & l1[1] != l2[0]) {
                document.getElementById("res").innerHTML = "Numbers Matched: 1\nPosition Matched: 1";
            }
            else if (l1[1] == l2[0] & l1[0] != l2[0]) {
                document.getElementById("res").innerHTML = "Numbers Matched: 1\nPosition Matched: 0";
            }
        }
        else if (l2.length == 2 & l1.length < l2.length) {
            if (l1[0] == l2[0]) {
                document.getElementById("res").innerHTML = "Numbers Matched: 1\nPosition Matched: 1";
            }
            else if (l1[0] == l2[1]) {
                document.getElementById("res").innerHTML = "Numbers Matched: 1\nPosition Matched: 0";
            }
            else if (l1[0] != l2[0] & l1[0] != l2[1]) {
                document.getElementById("res").innerHTML = "Numbers Matched: 0\nPosition Matched: 0";
            }

        }

    }

}
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="com_hrd.css" />
    <title>GUESS</title>
    <script type="text/javascript" src="com_hrd.js"></script>
  </head>
  <body>
    <h1 id="a1">GUESS</h1>
    <h1 id="a2">_Hard</h1>
    <h2 id="a3">Hello <span id="res1"></span></h2>
    <div class="hr2"></div>

    <button type="submit" id="f1" onclick="msg()">
      Generate
    </button>

    <div id="res5"></div>
    <div id="res6"></div>
    <div id="res"></div>

    <h2 id="a3_1">Enter Your Lucky Number></h2>
    <h2 id="a3_2">To Start Game:=></h2>

    <div id="snackbar">
      Number generated...Enter the Number
    </div>

    <input type="number" id="a4" />

    <button
      type="submit"
      id="a5"
      onclick="cal(document.getElementById('a4').value)"
    >
      Check
    </button>
  </body>
</html>