0

<head>私の CS の先生は、すべての JS をタグに入れ、それ以外の場所には入れないようにと主張しています。彼はまた、ライブラリを一切使用せずにバニラ JavaScript のみを使用していると主張しています。したがって、準拠するために、次のフォームを作成し、それを検証するための JS を付随させました。問題は、状態変更チェッカーでラップすると機能しないことです。私のコードは以下です

HTML

<!DOCTYPE html>
<html>

<head>
<script src="script.js"></script> 

</head>

<body align="center">

<h2>Super Secret Login</h2>

<!--Added an onsubmit action to catch the form in case it isn't valid !-->

<form onsubmit="return j.validate()" name="myForm" action="http://sophist.cs.slcc.edu/~philn/cgi-bin/quick.cgi" method="post">UserID:
    <input name="userid" size="15" /> <!-- Remember closing tags on all elements !-->
    <br />
    <br />Password:
    <input name="password" size="15" />
    <br />
    <br />
    <center>
        <table cellspacing="20px">
            <tr>
                <td align="left">
                    <input id="submit" type="submit" value="Submit" />
                </td>
                <td align="right">
                    <input type="reset" value="Clear" />
                </td>
            </tr>
        </table>
    </center>
</form>
</body>
</html>

JavaScript

function domReady() {

    var flag;
    var userid = document.myForm.userid;
    var pas = document.myForm.password;





    this.validate = function () {

        if (userid.value === "milton1" && pas.value === "k1mb3r")

        {
            flag = 1;
        } else if (userid.value === "shelly15" && pas === "4ng21") {
            flag = 1;
        } else {
            flag = 0;
        }



        if (flag === 0) {

            alert('There was a problem with your username and password');
            return false;

        } else {
            return true;
        }
    };


}






// Mozilla, Opera, Webkit 
if (document.addEventListener) {
    document.addEventListener("DOMContentLoaded", function () {
        document.removeEventListener("DOMContentLoaded", arguments.callee, false);
        var j = new domReady();

    }, false);

    // If IE event model is used
} else if (document.attachEvent) {
    // ensure firing before onload
    document.attachEvent("onreadystatechange", function () {
        if (document.readyState === "complete") {
            document.detachEvent("onreadystatechange", arguments.callee);
            var j = new domReady();

        }
    });
}

すべてを関数でラップせずに、サブミットをメソッドとして呼び出すことなく、スクリプトをページの下部に配置する限り、これは機能します。このように機能しない理由を誰かが理解するのを手伝ってくれますか?

4

2 に答える 2

1

jはフォームの の範囲外ですonsubmit。インライン イベント ハンドラーで使用するには、グローバルである必要があるため、イベント リスナー内で宣言することはできません。

への変更：

var j;
// Mozilla, Opera, Webkit 
if (document.addEventListener) {
    document.addEventListener("DOMContentLoaded", function () {
        document.removeEventListener("DOMContentLoaded", arguments.callee, false);
        j = new domReady();

    }, false);

    // If IE event model is used
} else if (document.attachEvent) {
    // ensure firing before onload
    document.attachEvent("onreadystatechange", function () {
        if (document.readyState === "complete") {
            document.detachEvent("onreadystatechange", arguments.callee);
            j = new domReady();

        }
    });
}
于 2013-11-14T20:02:58.560 に答える
-2

ブラウザがタグを見るたび<script>に、それを実行します。にロードするscript.jsと実行され、まだ解析されていないため、まだ存在しない<head>を見つけようとします。したがって、変数は になります。<form>useridpasundefined

コードを に保持し、<head>期待どおりに機能させるには、DOM の準備が整ったときにコードを実行する必要があります。

これを行う簡単な方法は、次のように、ドキュメントが読み込まれた後にトリガーされるコールバックを定義することです。

window.onload = domReady;
于 2013-11-14T20:05:56.300 に答える