CODEWITHSUNDEEP
javascripthtml
jjones5
jjones5

Reputation: 23

Show Password Function triggered when enter button is hit (when not supposed to)

I'm having trouble with my "showPassword" function. I have my code setup so that when a user hits the enter key (releases the enter key technically), it'll trigger the login submit button function. However, I also notice it triggers the showPassword function too, and I can't figure out why. I'm fairly new to javascript, so any help is appreciated!

Is this because in the HTML portion, the password button comes before the submit button?

Here is my code so far:

//Javascript event listeners:

document.addEventListener("DOMContentLoaded", function() {
  loginButton.addEventListener("click", loginButtonClick);
  newTransactionButton.addEventListener("click", newTransactionButtonClick);
  displayPassword.addEventListener("click", displayPasswordClick);
  newTransaction.addEventListener("click", newTransactionSubmitButtonClick);
  next.addEventListener("click", nextPage);
  prev.addEventListener("click", prevPage);


  //if user wants to hit the enter key while on the username input field to submit:
  var loginButtonEnter = document.getElementById("loginEmail");
  loginButtonEnter.addEventListener("keyup", function(event) {
    if (event.keyCode === 13) // Number 13 is the "Enter" key on the keyboard
    {
      document.getElementById("loginButton").click();
    }
  });

  //if user wants to hit the enter key while on the password input field to submit:
  var loginButtonEnter = document.getElementById("loginPassword");
  loginButtonEnter.addEventListener("keyup", function(event) {
    if (event.keyCode === 13) // Number 13 is the "Enter" key on the keyboard
    {
      document.getElementById("loginButton").click();
    }
  });
});


// Show password function:

//dispalys the password as text or hidden password (switches between)
function displayPasswordClick() {
  var userPassword = document.getElementById("loginPassword");
  const type = userPassword.getAttribute('type') === 'password' ? 'text' : 'password';
  userPassword.setAttribute('type', type);
  event.preventDefault();
}
<br>
<span class="loginBodyText">Password:</span>
<input type="password" id="loginPassword" placeholder="password"></input>
<div><b class="errorText" id="addErrorPartnerUserSecret"></b></div>
<br>

<!-- button to toggle password visibility -->
<button id="loginPasswordDisplay">Show Password</button>
<button id="loginButton">Submit</button>

Upvotes: 2

Views: 1017

Answers (1)

connexo
connexo

Reputation: 56793

Change

<button id="loginPasswordDisplay">Show Password</button>

to

<button type="button" id="loginPasswordDisplay">Show Password</button>

The default type for button elements is submit. Enter inside a form triggers the first submit button in that form, and you don't need any keyboard listeners for this behaviour.

Currently that is your Show Password button, thus Enter additionally activates any click listeners on that as well.

type
The default behavior of the button. Possible values are:
submit: The button submits the form data to the server. This is the default if the attribute is not specified for buttons associated with a <form>, or if the attribute is an empty or invalid value.
reset: The button resets all the controls to their initial values, like <input type="reset">. (This behavior tends to annoy users.)
button: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type

Upvotes: 3

Related Questions