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

回答

相關問題