JavaScript 使用条件重置输入答案

【问题标题】：JavaScript Reset Input with a ConditionJavaScript 使用条件重置输入
【发布时间】：2017-11-13 20:54:19
【问题描述】：

如果loginDiv 显示为无，我正在尝试重置一些登录的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>

【问题讨论】：

display: none 实际上是从 DOM 中删除该元素，这意味着 JavaScript 不再有权访问它。考虑到您的字段位于您要删除的 DIV 内，您要实现的目标是不可能的。如果有帮助，您可以使用 visibility: hidden 获得所需的结果。
@ObsidianAge 你错了。设置 display: none 不会将其从 DOM 中删除，它只是将 CSS display 属性设置为 none。

标签： javascript html forms reset

【解决方案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>

【讨论】：

你应该添加一些解释 - 不要只是发布代码作为答案。
最简单的方法。我猜我想多了。

【解决方案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 = '';
      }

【讨论】：