JavaScript 重置带条件的输入

Question

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

期望结果：点击登录按钮，只要loginDiv显示为none，两个输入框就会被重置。

这是我的代码：

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

Yoy 无法点击按钮登录，如果此按钮不可见，并且您可以通过下一个代码重置输入槽中的数据：

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

JavaScript 重置带条件的输入

JavaScript Reset Input with a Condition

javascript

html

forms

reset