2013-10-14 13 views
0

에서 양식 요소에 액세스하는 것은 간단한 것 같아서 조금 더 이해하고 싶습니다. 여기에 내 문제가있다.외부 자바 스크립트 파일

몇 가지 옵션이있는 선택 항목이 양식 안에 있습니다. 선택한 옵션에 따라 다른 옵션을 사용할 수 있도록 어느 옵션을 선택할지 결정할 변수가 필요합니다.

<!DOCTYPE html> 
    <html> 
    <head> 
     <title>Test</title> 
     <script src="script.js" type="text/javascript"></script> 
    </head> 
    <body> 

    <form method="get"> 
     <table> 
      <tr> 
       <p> 
        Please choose your class: 
       </p> 
      </tr> 
      <tr> 
       <td> 
        <select name= "classSelect" id="classSelect" size = "3"> 
         <option value = "CS211" selected = "selected">CS-211</option> 
         <option value = "CS111">CS-111</option> 
         <option value = "CS275">CS-275</option> 
        </select> 
       </td> 
      </tr> 
     </form 
    </body> 
</html> 

그리고 내 자바 스크립트 파일에 단순히 전역 변수를 선언 할 : 이제 currentSelection는 항상 null 내가 왜 확실하지 않다

var currentSelection = document.forms[0].classSelect.selectedIndex; 

을 여기

내 HTML입니다 .

+1

아마도 JQuery와 사용 할 $ ("#의 classSelect") 발() ? – NWard

답변

3

변수를 설정할 때 DOM이 아직 렌더링되지 않았습니다. DOM이 준비 이벤트를 시작하거나 문서가로드 된 후 스크립트가 실행되도록 설정할 때까지 기다리십시오. 해결책은 다음과 같습니다.

window.onload = function() { 
    // run this code on load 
}; 

이전의 onload 기능을 덮어 쓰게됩니다. 당신이 jQuery를 사용할 수있는 경우에, 당신은 어떤 덮어 쓰기를 방지하기 위해 대신이 작업을 수행해야합니다

$(window).load(function() {}); 

이 변종도 작동 :.

$(function() {}); 
$(document).ready(function() {}); 
+0

내가해야 할 일을 수행하는 가장 좋은 방법은 무엇입니까? –

+0

답변을 수정했습니다. – hexacyanide

+0

currentSelection은 아직 정의되지 않았습니다. 기본적으로 선택 목록에서 첫 번째 요소를 선택 했으므로 처음에는 값이 0이 될 것으로 예상하고 두 번째 요소를 누르는 등 한 요소로 변경해야합니다. 내가 잘못 했습니까? –

관련 문제