JavaScript Reset with Condition

Question

loginDivの表示がnoneの場合、ログインするために一部のinputフィールドをリセットしようとしていますが、全く動作しません。

希望の結果：loginDivが表示されていない限りログインボタンをクリックすると、2つの入力フィールドがリセットされます。ここで

私のコードです：

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

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

Answer 2

このボタンが表示されていない場合は前年比では、ボタンのクリックしてログインする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 = ''; 
     }