Javascript: Show second textbox on keypress

Question

I have two textboxes (pass1 and pass2). I want for pass2 to be hidden and only appear when something is entered in pass1. Pass2 should hide when pass1 is null.

Answer 1

Use a function that syncs pass2 with pass1.

function syncTextFields() {
    var pass1 = this;
    var pass2 = document.getElementById('pass2');

    if(pass1.value == '') {
        pass2.style.display = 'none';
    }
    else {
        pass2.style.display = '';
    }
}

Then run the sync function when anything is typed in the pass1 field.

pass1.onkeyup = syncTextFields;

We separated the logic into a function so that function can be run separately on page load as well.

window.onload = function() {
    syncTextFields();
    document.getElementById('pass1').onkeyup = syncTextFields;
};

Answer 2

<script type="text/javascript">

function checkVisibility() {

   var pass1 = document.getElementById('pass1');
   var pass2 = document.getElementById('pass2');

   if (pass1.value.length > 0) {
      pass2.style.visibility = 'visible';
   } else {
      pass2.style.visibility = 'hidden';
   }
}

</script>

<input id="pass1" type="password" onkeyup="checkVisibility()" />
<input id="pass2" type="password" style="visibility: hidden;"/>