具有条件的JavaScript重置输入

Question

如果input显示为none，我尝试重置某些loginDiv字段以进行登录，但它根本不起作用。

所需结果：单击登录按钮，只要loginDiv显示为none，就会重置两个输入字段。

这是我的代码：

＆＃13;

＆＃13;

// 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();
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

如果此按钮不可见，你可以点击按钮登录 可以重置输入问题中的数据下一个代码：

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 = '';
      }