DOM Ready vanilla javascript does not working

我的CS老师坚持说所有的JS都必须放在<head>标签和其他地方。他还坚持我们只使用香草JavaScript而没有任何库。所以为了遵守，我创建了下面的表单，附带JS来验证它。问题是，当在状态改变检查器中包装它不起作用。我的代码如下DOM Ready vanilla javascript does not working

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

     } 
    }); 
}

现在没有一个函数包装了整个事情，并要求提交，因为这工作的方法，只要我把剧本在页面底部。有人能帮助我理解为什么它不能以这种方式工作吗？

来源

2013-11-14 richbai90

你的CS老师不是傻瓜 – NimChimpsky

人仍然使用上形成透明按钮？不管什么？ –

最佳做法是脚本标记位于页面的末尾以确保DOM已加载？回顾我对CS老师的个人看法，对这个问题有何看法？ – richbai90

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-14 20:02:58 bfavaretto

这证明是答案，我感谢你的帮助。我还是不太明白addEventListener是如何工作的，因为我从来没有用过它。原谅我的傲慢，认为有一个正确的方法来做到这一点。我的CS老师没有教我们如何做到这一点，这是令人沮丧的 – richbai90

事情是：如果你在一个函数内部声明了一个变量，它在该函数外部是不可见的。并且您将函数传递给addEventListener。这是问题的根源。 – bfavaretto

欣赏帮助 – richbai90

-1

每次浏览器中看到是一个<script>标签，它运行它。当您在<head>中加载您的script.js时，它会运行它，并且它会尝试查找尚未解析的<form>，因此仍然不存在。所以你的userid和pas变量将是undefined。

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

最简单的方式做到这一点，是定义一个回调的文件被加载后，好像是会触发：

window.onload = domReady;

来源

2013-11-14 20:05:56 brunops

DOM Ready vanilla javascript does not working

回答

相关问题