1. HTML

 

<form name="form" id="form">
     <!-- 로그인 되기전에 보여지는 곳 시작 -->
     <div id="b1" name="b1" style="display:;"><b>로그인 전</b></br></div>
     <input type="text" id="name"  name="name" value="" style="display:;"/>
     <input type="text" id="pw"  name="pw" value="" style="display:;"/>
     <!-- 로그인 되기전에 보여지는 곳 끝 -->
    
     <!-- 로그인 후에 보여지는 곳 시작 -->
     <div id="b2" name="b2" style="display:none;"><b>로그인 후</b></br></div>
     <input type="text" id="nameb"  name="nameb" value="로그인 성공!" readonly  style="display:none;"/>
     <input type="password" id="pwb"  name="pwb" value="" readonly  style="display:none;"/>
     <!-- 로그인 후에 보여지는 곳 끝 -->
 </form>
 </p>
 <input type="button" value="전송" onclick="login()"/>

 

 

 

2. SCRIPT

 

function login() {
    var checkName = false, checkPassword = false;
    var name1 = document.getElementById("name").value;
    var pass = document.getElementById("pw").value;
    f = document.forms.form;
    
    // var b1 = document.getElementById("b1").textContent;
    // var b2 = document.getElementById("b2").textContent;

    var namea = "a";
    var passworda = "a";
     
    if(namea == name1){
         checkName="true";
        
         if(pass == passworda){
              checkPassword="true";
         }
     }
    
     /* 원래 소스부분 주석 처리 (사용할때는 주석해재)
     for(var i in stu){
          if (stu[i].name==name1){
               checkName=true;
               if(stu[i].password == pass){
                     checkPassword=true;
               }
          }
     }
     */

 

     // 추가할 부분 시작 
     if(checkPassword=="true" && checkName=="true"){
         // alert("1");
         f.name.style.display = "none";
         f.pw.style.display = "none";
         f.nameb.style.display = "";
         f.pwb.style.display = "";

         document.getElementById("b1").style.display = "none";
         document.getElementById("b2").style.display = "";
     }else{
    // alert("2");
         f.name.style.display = "";
         f.pw.style.display = "";
         f.nameb.style.display = "none";
         f.pwb.style.display = "none";
         
         document.getElementById("b1").style.display = "";
         document.getElementById("b2").style.display = "none";
     }
     // 추가할 부분 끝

     if(!checkName) alert("사용자님은 회원이 아닙니다.");
     else if(!checkPassword) alert("비밀번호가 틀렸습니다.");
     else alert("사용자님이 회원임을 확인했습니다!"); 

}

 

 

3. 실행화면