Question

我的CS老师坚持认为所有JS都必须放在<head>标签中，而不是其他地方。他还坚持认为我们只使用没有任何库的vanilla 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();

        }
    });
}

现在没有将整个事物包装在一个函数中并且调用submit作为一个方法，只要我将脚本放在页面的底部。有人能帮助我理解为什么它不能以这种方式起作用吗？

Answer 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();

        }
    });
}

Answer 2

每当您的浏览器看到<script>标记时，它就会运行它。当您在script.js中加载<head>时，它会运行它，并尝试找到尚未解析的<form>，因此仍然不存在< / strong>即可。因此，您的userid和pas变量将为undefined。

要使代码保持在<head>并使其按预期方式工作，您必须在DOM准备就绪时运行代码。

这样做的简单方法是定义一个在文档加载后将触发的回调，如：

window.onload = domReady;

DOM Ready vanilla javascript无法正常工作

2 个答案: