Javascript 토글이 로컬 호스트에서 작동하지 않습니다.

JSFiddle에서 볼 수 있듯이 로그인 및 등록기의 토글은 정상적으로 작동하지만 내 로컬 컴퓨터에서이를 테스트 할 때 "Uncaught TypeError : 속성을 읽을 수 없습니다. bt2에 대해 'of null'의 addEventListener입니다. 여기 Javascript 토글이 로컬 호스트에서 작동하지 않습니다.

코드

CSS

#login 
{ 

} 
#register 
{ 
    display:none; 
} 
#container{ 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 

input, select { 
    padding: 9px; 
    border: solid 1px #E5E5E5; 
    outline: 0; 
    font: normal 13px/100% Verdana, Tahoma, sans-serif; 
    width: 200px; 
    background: #FFFFFF url('bg_form.png') left top repeat-x; 
    background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF)); 
    background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px); 
    box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
    -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
    -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
    } 

select { 
    width: auto; 
     } 

input:hover, select:hover, 
input:focus, select:focus { 
    border-color: #C9C9C9; 
    -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px; 
    } 


input[type=submit] { 
    width: auto; 
    padding: 9px 15px; 
    background: #617798; 
    border: 0; 
    font-size: 14px; 
    color: #FFFFFF; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    }

HTML

<div id="container"> 
<button id="bt1" type="button"> Login 
</button> 
<button id="bt2" type="button">Register 
</button> 
<br> 
<div id="login"> 
Login Form 
</div> 
<div id="register"> 
<form action="#" method="post" enctype="multipart/form-data"> 
<table> 
<tr> 
<td>Salutation 
</td> 
<td> 
<select name="Salutation"> 
<option value="Ms">Ms</option> 
<option value="Mrs">Mrs</option> 
<option value="Mr">Mr</option> 
<option value="Dr">Dr</option> 
</select> 
</td> 
</tr> 
<tr> 
<td> 
First Name 
</td> 
<td> 
<input type="text" name="F_Name"> 
</td> 
</tr> 
<tr> 
<td> 
Last Name 
</td> 
<td> 
<input type="text" name="L_Name"> 
</td> 
</tr> 
<tr> 
<td> 
E-Mail 
</td> 
<td> 
<input type="text" name="email"> 
</td> 
</tr> 
<tr> 
<td> 
Password(Min 6 characters) 
</td> 
<td> 
<input type="password" name="pass"> 
</td> 
</tr> 
<tr> 
<td> 
Phone Number(10 digit) 
</td> 
<td> 
<input type="text" name="P_Number"> 
</td> 
</tr> 
<tr> 
<td> 
</td> 
<td> 
<input type="Submit" value="Get Started" name="Submit"> 
</td> 
</tr> 
</table> 
</form> 
</div> 
</div>

에게 자바 스크립트

나는이 문 제 뒤에 이유를 이해하기 위해 내가 할 수있는 모든 것을 시도

function swap(login, register) { 
    document.getElementById(login).style.display = 'block'; 
    document.getElementById(register).style.display = 'none'; 
} 
document.getElementById('bt1').addEventListener('click',function(e){ 
    swap('login','register'); 
}); 
document.getElementById('bt2').addEventListener('click',function(e){ 
    swap('register','login'); 
});

입니다 그러나 나는 그렇게 할 수 없다.

도움을 주시면 감사하겠습니다.

출처

2015-02-01 CAO

의 끝에서 스크립트를로드? – Shomz

@Shomz

Javascript 토글이 로컬 호스트에서 작동하지 않습니다.

관련 문제