2017-11-13 21 views
0

loginDiv 디스플레이가 표시되지 않지만 전혀 작동하지 않는 경우 로그인을 위해 일부 input 필드를 재설정하려고합니다.JavaScript 재설정 조건이있는 입력

원하는 결과 : loginDiv 표시가없는 한 로그인 버튼을 클릭하면 두 입력 필드가 재설정됩니다. 사용자 이름과 암호가 확인 된 후

// LOGIN 
 
const logDiv = document.getElementById('loginDiv'); 
 
const wrong = document.getElementById('wrong'); 
 
const user = document.getElementById('user'); 
 
const pass = document.getElementById('pass'); 
 
const log = document.getElementById('logBtn'); 
 

 
log.addEventListener('click',() => { 
 
    if (user.value == 'f' && pass.value == 'f') { 
 
    logDiv.style.display = 'none'; 
 
    wrong.style.display = 'none'; 
 
    } else { 
 
    wrong.style.display = 'block'; 
 
    } 
 
}); 
 

 
// LOGOUT 
 

 
const logout = document.getElementById('logout'); 
 

 
logout.addEventListener('click',() => { 
 
    if (logDiv.style.display == 'none') { 
 
    logDiv.style.display = 'block'; 
 
    } 
 
}); 
 

 
function resetForm() { 
 
    if (logDiv.style.display == 'none') { 
 
    user.reset(); 
 
    pass.reset(); 
 
    } 
 
}
<div id="loginDiv"> 
 
    <input id="user" type="text" placeholder="username"></input> 
 
    <input id="pass" type="password" placeholder="password"></input> 
 
    <button id="logBtn" onclick="resetForm()">login</button> 
 
</div> 
 
<div id="wrong" style="display: none;"> 
 
    <p id="wrongText">incorrect login info.</p> 
 
</div> 
 

 
<div id="logoutDiv"> 
 
    <button id="logout" type="button">logout</button> 
 
</div>

+1

'디스플레이 : 실제로 none' ** 제거 ** 자바 스크립트가 더 이상이 없다는 의미 DOM에서 요소, 에 액세스하십시오. 귀하의 필드가 제거하려고하는 DIV 안에 있다고 생각하면 달성하려는 것은 불가능합니다. 도움이된다면'visibility : hidden'을 사용하여 원하는 결과를 얻을 수 있습니다. –

+3

@ObsidianAge 틀렸어. 'display : none'을 설정해도 DOM에서 그것을 제거하지 못하면 단순히 CSS의 display 속성을 none으로 설정합니다. –

답변

1

당신은 빈 문자열로 사용자 및 암호 텍스트 상자의 값을 설정할 수 있습니다 :

여기 내 코드입니다.

user.value = ""; 
pass.value = ""; 

// LOGIN 
 
const logDiv = document.getElementById('loginDiv'); 
 
const wrong = document.getElementById('wrong'); 
 
const user = document.getElementById('user'); 
 
const pass = document.getElementById('pass'); 
 
const log = document.getElementById('logBtn'); 
 

 
log.addEventListener('click',() => { 
 
    if (user.value == 'f' && pass.value == 'f') { 
 
    user.value = ""; 
 
    pass.value = ""; 
 
    logDiv.style.display = 'none'; 
 
    wrong.style.display = 'none'; 
 
    } else { 
 
    wrong.style.display = 'block'; 
 
    } 
 
}); 
 

 
// LOGOUT 
 

 
const logout = document.getElementById('logout'); 
 

 
logout.addEventListener('click',() => { 
 
    if (logDiv.style.display == 'none') { 
 
    logDiv.style.display = 'block'; 
 
    } 
 
}); 
 

 
function resetForm() { 
 
    if (logDiv.style.display == 'none') { 
 
    user.reset(); 
 
    pass.reset(); 
 
    } 
 
}
<div id="loginDiv"> 
 
    <input id="user" type="text" placeholder="username"></input> 
 
    <input id="pass" type="password" placeholder="password"></input> 
 
    <button id="logBtn" onclick="resetForm()">login</button> 
 
</div> 
 
<div id="wrong" style="display: none;"> 
 
    <p id="wrongText">incorrect login info.</p> 
 
</div> 
 

 
<div id="logoutDiv"> 
 
    <button id="logout" type="button">logout</button> 
 
</div>

+0

몇 가지 설명을 추가해야합니다. 답변을 코드로 게시하는 것이 아닙니다. – csmckelvey

+0

가장 간단한 방법입니다. 내가 지나치게 생각한 것 같아. – hannacreed

0

이 버튼이 보이지 않는 경우 전년 동기 대비는 버튼 로그인에 클릭 can'n하고 입력 trougth 다음 코드의 데이터를 재설정 할 수 있습니다

function resetForm() { 
    user.value=''; 
    pass.value=''; 
} 

가장 좋은 방법은 resetForm을 사용하는 것입니다.

logDiv.style.display = 'none'; 
    wrong.style.display = 'none'; 
    resetForm(); 

코드에 많은 위치가 있기 때문에 onclick을 사용하는 것은 좋지 않습니다.

예를 들어

전체 코드 : HTML :

<div id="loginDiv"> 
     <input id="user" type="text" placeholder="username"> 
     <input id="pass" type="password" placeholder="password"> 
     <button id="logBtn">login</button> 
    </div> 
    <div id="wrong" style="display: none;"> 
     <p id="wrongText">incorrect login info.</p> 
    </div> 

    <div id="logoutDiv"> 
     <button id="logout" type="button">logout</button> 
    </div> 

JS :

//LOGIN 
     const logDiv = document.getElementById('loginDiv'); 
     const wrong = document.getElementById('wrong'); 
     const user = document.getElementById('user'); 
     const pass = document.getElementById('pass'); 
     const log = document.getElementById('logBtn'); 

     log.addEventListener('click',() => { 
     if (user.value == 'f' && pass.value == 'f') { 
      logDiv.style.display = 'none'; 
      wrong.style.display = 'none'; 
      resetForm(); 
     } else { 
      wrong.style.display = 'block'; 
     } 
     }); 

     // LOGOUT 

     const logout = document.getElementById('logout'); 

     logout.addEventListener('click',() => { 
     if (logDiv.style.display == 'none') { 
      logDiv.style.display = 'block'; 
     } 
     }); 

     function resetForm() { 

     user.value = ''; 
     pass.value = ''; 
     }