CODEWITHSUNDEEP
javascript
questionsaboutmycode
questionsaboutmycode

Reputation: 77

Javascript hide & show div to enter password

I have a hidden div element, that includes an input for a password, if an user clicks the button for a private session.

Only the part of my function, where it does show the hidden put works. Reversed, the other way around, it is not hiding the shown input after another click on the button (using bootstrap with Laravel btw).

"password button trigger"

function passwordCreator(id) {
  if (document.getElementById(id).style.visibility = 'hidden') {
      document.getElementById(id).style.visibility = 'visible';
  }else if(document.getElementById(id).style.visibility = 'visible') {
      document.getElementById(id).style.display = 'none';
  }
}
<div class="custom-control custom-switch" onclick="passwordCreator('enterPassword')">
    <input type="checkbox" class="custom-control-input" id="customSwitch1">
    <label class="custom-control-label" for="customSwitch1">Private Session?</label>
</div>

<div class="input-group" style="visibility:hidden" id="enterPassword">
    <div class="input-group-prepend">
        <span class="input-group-text" id="">Passwort</span>
    </div>
    <input type="password" class="form-control">
</div>

Did not work either. Any ideas?

Upvotes: 1

Views: 805

Answers (2)

Martin
Martin

Reputation: 16433

You've got a couple of minor issues with your code.

Issue 1: Equality Checking

The first is that you are using a single = for equality checking. You should be using a double-equals ==, as a single indicates assignment (so you reassign the value of visibility instead of evaluating it):

if (document.getElementById(id).style.visibility = 'hidden') {

Should be (notice double =):

if (document.getElementById(id).style.visibility == 'hidden') {

Issue 2: Using Display

The second issue is using display = 'none'. You just need to set the visibilitiy back to visible:

document.getElementById(id).style.display = 'none';

Should be:

document.getElementById(id).style.visibility = 'hidden';

Issue 3: Use OnChange not OnClick

Finally, your onclick code is firing twice. Rather than using onclick on the div, just use onchange on the checkbox itself, which only fires when the check changes:

<div class="custom-control custom-switch" onclick="passwordCreator('enterPassword')">
    <input type="checkbox" class="custom-control-input" id="customSwitch1">

Should be:

<div class="custom-control custom-switch">
    <input type="checkbox" class="custom-control-input" id="customSwitch1"

Working Code

Here's the working code:

function passwordCreator(id) {
  if (document.getElementById(id).style.visibility == 'hidden') {
    document.getElementById(id).style.visibility = 'visible';
  } else if(document.getElementById(id).style.visibility == 'visible') {
    document.getElementById(id).style.visibility = 'hidden';
  }
}
<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch1" onchange="passwordCreator('enterPassword');">
  <label class="custom-control-label" for="customSwitch1">Private Session?</label>
</div>

<div class="input-group" style="visibility:hidden" id="enterPassword">
  <div class="input-group-prepend">
    <span class="input-group-text" id="">Passwort</span>
  </div>
  <input type="password" class="form-control">
</div>

Upvotes: 3

Nicolas
Nicolas

Reputation: 8670

You are not comparing your string correctly, there is only one =, this is assigning value rather than comparing them.

Also, when setting the visibility property to 'visible' you are never removing the display:none. Samething when adding the display:none property, you are never changing the visibility. So it passes in your code only one time.

function passwordCreator(id) {
  if (document.getElementById(id).style.visibility == 'hidden') {
      document.getElementById(id).style.visibility = 'visible';
      document.getElementById(id).style.display = 'unset';
  }else if(document.getElementById(id).style.visibility == 'visible') {
      document.getElementById(id).style.display = 'none';
      document.getElementById(id).style.visibility = 'hidden';
  }
}
<div class="custom-control custom-switch" onclick="passwordCreator('enterPassword')">
    <input type="checkbox" class="custom-control-input" id="customSwitch1">
    <label class="custom-control-label" for="customSwitch1">Private Session?</label>
</div>

<div class="input-group" style="visibility:hidden" id="enterPassword">
    <div class="input-group-prepend">
        <span class="input-group-text" id="">Passwort</span>
    </div>
    <input type="password" class="form-control">
</div>

P.S. Changing the value of the checkbox using the label will not trigger the onclick event. You might want to change it to listen to another event instead.

Upvotes: 1

Related Questions