2013-11-14 3 views
0

제 CS 강사는 모든 JS를 <head> 태그와 다른 곳에 넣지 말아야한다고 주장합니다. 그는 또한 도서관없이 바닐라 자바 ​​스크립트만을 사용한다고 주장합니다. 따라서 준수하기 위해 JS를 사용하여 다음 양식을 작성하여 유효성을 검사했습니다. 문제는 상태 변경 검사기로 감싸면 작동하지 않는다는 것입니다. 내 코드는 HTML DOM 준비 바닐라 자바 ​​스크립트가 작동하지 않습니다.

아래

<!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> 

자바 스크립트

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

     } 
    }); 
} 

지금은 스크립트를 넣어 너무 오래, 함수에 모든 것을 포장이 작동하는 방법으로 제출 호출하지 않고 페이지 하단에 누군가 내가 왜 이런 방식으로 작동하지 않는지 이해할 수 있습니까?

+1

당신의 CS 교사 – NimChimpsky

+0

사람들은 여전히 ​​형태에 CLEAR 버튼을 사용 바보되지 않습니다 :

이 작업을 수행하는 쉬운 방법은, 문서와 같은로드 된 후 트리거됩니다 콜백을 정의하는 것입니다 ? 무엇을 위해? –

+0

DOM이로드되었는지 확인하기 위해 스크립트 태그를 페이지 끝 부분에 배치하는 것이 좋지 않은가요? 그리고 저의 선생님에 대한 저의 개인적인 의견을 보면서, 당면한 질문에 대한 어떤 생각을 가지고 있습니까? – richbai90

답변

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

     } 
    }); 
} 
+0

이것이 답변 인 것으로 나타났습니다. 귀하의 도움에 감사드립니다. addEventListener가 어떻게 작동하는지 결코 이해하지 못합니다. 이 일을 할 올바른 방법이 있다고 가정하여 나의 오만함을 용서하십시오. 내 CS 선생님이 우리에게이 방법을 가르쳐주지 않았습니다. 실망 스럽습니다. – richbai90

+1

사실 : 함수 안에 변수를 선언하면 해당 함수 외부에서 볼 수 없습니다. 그리고 addEventListener에 함수를 전달하고 있습니다. 그것이 문제의 근원입니다. – bfavaretto

+0

도움 감사 – richbai90

-1

브라우저 페이지는 <script> 태그의 때마다, 그것을 실행합니다. script.js<head>에로드하면 실행되고 아직 구문 분석되지 않은 <form>을 찾으므로 은 아직 존재하지 않습니다. 따라서 useridpas 변수는 undefined이됩니다.

코드를 <head>에 유지하고 예상대로 작동하게하려면 DOM 준비가 완료되면 코드를 실행해야합니다.

window.onload = domReady; 
관련 문제