Toggle the 2nd password field

Saw this solution posted by Eduardo Jauch.

I'm new to JS Scripting.....instead of '.login-password', the element ID for my case is 'Input_NewPassword', am I right? How should be the JS? Below is my script...doesn't seems to work.

Purpose is to show and hide the second password field.


var inputPassword = document.querySelector('Input_NewPassword');
var typeInputPassword = inputPaswword.type;
if(typeInputPassword === 'password'){
    inputPassword.setAttribut('type', 'text');
}else{
    inputPassword.setAttribut('type', 'password');
}


Hi Joseph,

The query selector in Eduardo's code refers to a style class of the password field, 'login-password'.
You should just add that class and it should work.

Regards,
Lennart

Lennart Kraak wrote:

Hi Joseph,

The query selector in Eduardo's code refers to a style class of the password field, 'login-password'.
You should just add that class and it should work.

Regards,
Lennart

Hi thanks for replying.

I have change the Style Classes is 'login-password'. Still not working...with error "inputPassword is not define."

Something wrong my my JS?


var inputPassword = document.querySelector('login-password');
var typeInputPassword = inputPaswword.type;
if(typeInputPassword === 'password'){
    inputPassword.setAttribut('type', 'text');
}else{
    inputPassword.setAttribut('type', 'password');
}


To select an element based on a style class, you need to put a . (dot) in front of the class name.
So: 

var inputPassword = document.querySelector('.login-password');


Lennart Kraak wrote:

To select an element based on a style class, you need to put a . (dot) in front of the class name.
So: 

var inputPassword = document.querySelector('.login-password');


Had done that as well.... still not working.


Solution

Hi, did I hear my name? :D

You may want to fix your javascript that has errors... :)

Use this one here:

var inputPassword = document.querySelector('.login-password');
var typeInputPassword = inputPassword.type;
if(typeInputPassword === 'password'){
    inputPassword.setAttribute('type', 'text');
}else{
    inputPassword.setAttribute('type', 'password');
}

Cheers!

Eduardo Jauch

Solution

Eduardo Jauch wrote:

Hi, did I hear my name? :D

You may want to fix your javascript that has errors... :)

Use this one here:

var inputPassword = document.querySelector('.login-password');
var typeInputPassword = inputPassword.type;
if(typeInputPassword === 'password'){
    inputPassword.setAttribute('type', 'text');
}else{
    inputPassword.setAttribute('type', 'password');
}

Cheers!

Eduardo Jauch

Thanks! It works! To learn and understand better...Where is the error in the script? Typo error?


Also to learn more about the JS, if i was to use the elementid, is my script correct:

var inputPassword = document.getelementbyid('Input_NewPassword').value;
var typeInputPassword = inputPassword.type;
if(typeInputPassword === 'password'){
    inputPassword.setAttribute('type', 'text');
}else{
    inputPassword.setAttribute('type', 'password');
}


Yes. 3 typos :)

And yes, it should work with the id :)

The typos were indeed the culprit.
inputPaswword.type -> inputPassword.type
setAttribut -> setAttribute 

Yes, as Eduardo said, it works with the id, but not in the way you had in in your first example. You need to get the element's id that was given to it by the platform. So then you get something like:

var inputPassword = document.querySelector('" + Input_NewPassword.Id + "');

Hi Lennart,

I think in mobile the "id" is the name of the widget itself (differently from the web, where indeed you would need the .Id at the end).

By the way, @Joseph, JavaScript is case sensitive, so getElementById is the correct name of the function, and you would not use the .value at the end, with your code being like this:

var inputPassword = document.getElementById('Input_NewPassword');
var typeInputPassword = inputPassword.type;
if(typeInputPassword === 'password'){
    inputPassword.setAttribute('type', 'text');
}else{
    inputPassword.setAttribute('type', 'password');
}

Cheers.

Lennart Kraak wrote:

The typos were indeed the culprit.
inputPaswword.type -> inputPassword.type
setAttribut -> setAttribute 

Yes, as Eduardo said, it works with the id, but not in the way you had in in your first example. You need to get the element's id that was given to it by the platform. So then you get something like:

var inputPassword = document.querySelector('" + Input_NewPassword.Id + "');

Thank you! Lennart Kraak.


Eduardo Jauch wrote:

Hi Lennart,

I think in mobile the "id" is the name of the widget itself (differently from the web, where indeed you would need the .Id at the end).

By the way, @Joseph, JavaScript is case sensitive, so getElementById is the correct name of the function, and you would not use the .value at the end, with your code being like this:

var inputPassword = document.getElementById('Input_NewPassword');
var typeInputPassword = inputPassword.type;
if(typeInputPassword === 'password'){
    inputPassword.setAttribute('type', 'text');
}else{
    inputPassword.setAttribute('type', 'password');
}

Cheers.

Indeed...spotted the typo error.

Thank you for your advice.... with this, I had completed my 1st App!

Cheers!


Good to hear, Joseph,

Please, remember to mark the answer you think gives the solution to your question as the solution of your post.

Best regards,
Eduardo Jauch