JavaScript Reset Input with a Condition

Question

I am trying to reset some input fields for a login if the loginDiv display is none, however it is not working at all.

Desired Outcome: click the login button, so long as the loginDiv display is none, the two input fields will be reset.

Here is my code:

// 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 actually removes the element from the DOM, meaning that JavaScript no longer has access it to. Considering your fields are inside the DIV you're trying to remove, what you're trying to achieve is impossible. You can achieve the desired result with visibility: hidden if that helps though. — Obsidian Age
– Obsidian Age, Commented Nov 13, 2017 at 20:57
@ObsidianAge You're wrong. Setting display: none doesn't remove it from the DOM, it simply sets the CSS display property to none. — Joel Kornbluh
– Joel Kornbluh, Commented Nov 13, 2017 at 21:00

Aagam Jhaveri · Accepted Answer · 2017-11-13 21:10:52Z

1

You could set the value of user and password textbox to empty string after the username and password has been verified.

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>

edited Nov 13, 2017 at 21:10

answered Nov 13, 2017 at 21:00

Aagam Jhaveri

2343 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

takendarkk Over a year ago

You should add some explanation - don't just post code as an answer.

hannacreed Over a year ago

simplest way. Guess I was overthinking.

Petrashka Siarhei · Accepted Answer · 2017-11-13 21:22:39Z

Yoy can'n click to button login , if this button is not visible , and you can reset data in input trougth next code:

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

I think that best way is using resetForm in

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

Using onclick is not good way, because your code has many location.

Full code for example : 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 = '';
      }

Collectives™ on Stack Overflow

JavaScript Reset Input with a Condition

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related