Skip to main content
Known Participant
January 29, 2022
Answered

HTML5 Password Hidden

  • January 29, 2022
  • 3 replies
  • 437 views

Hi All,

I'm having a weird issue error come up and I just want to understand why.

Following a tutorial, I've written a simple script to make the password text 'dots' instead of the actual numbers:

 

var passwordInput = document.getElementById("passwordInput");

passwordInput.setAttribute("type", "password");

 

Works great, however I have to place the script on frame 2.

 

If I put it on frame 1, I recvive this error pointing to the second line of code and it does not convert the numbers into dots:

Uncaught TypeError: Cannot read properties of null (reading 'setAttribute')

 

So when I put it on frame 2 it works fine.

 

However, when I go to another page and I send the user back to the login screen (to frame 1 or 2, 0 or 1 in the code due to the HTML5 numbering) I get the error again, BUT this time it does continue to convert the numbers into dots.

 

So it works, but I'm wondering why I'm still getting an error and if I should be doing something differently?

 

Thank you again!

    This topic has been closed for replies.
    Correct answer JoãoCésar17023019

    Hi.

     

    It's because components are not immediately available in the first frame of the main timeline. One way of being sure they are ready is to listen for the drawend event on the stage. Like this:

    stage.on("drawend", function() // components cannot be accessed immediately
    {
    	var passwordDots = document.getElementById("passwordInput");
    	passwordDots.setAttribute("type", "password");
    }, this, true);

     

    I hope it helps.

     

    Regards,

    JC

    3 replies

    New Participant
    February 8, 2022

    U can add it to .CSS file for 

    var passwordInput = document.getElementById("passwordInput");

    passwordInput.setAttribute("type", "password");

     with HTML5 design code and HTML 4 design code to make a form for this problem and Great resourses are search for HTML coding can be find in Books,Java,Magazines and at Library. But Internet search Tools are better for more handly with YouTube Video for them, edu can help u too and lot more info about like Adobe Dreamweaver(Web Dev) sorry Flash software and shockwave are Not Long been use for Website,Non websites designs with Flash software and shockwave to review them. Notepad++  can let u do HTML Codes but you to no the code for this. 

     

    JoãoCésar17023019
    JoãoCésar17023019Correct answer
    Community Expert
    January 30, 2022

    Hi.

     

    It's because components are not immediately available in the first frame of the main timeline. One way of being sure they are ready is to listen for the drawend event on the stage. Like this:

    stage.on("drawend", function() // components cannot be accessed immediately
    {
    	var passwordDots = document.getElementById("passwordInput");
    	passwordDots.setAttribute("type", "password");
    }, this, true);

     

    I hope it helps.

     

    Regards,

    JC

    Known Participant
    January 31, 2022

    Another Weird Question that has happened on multiple projects that I'm not sure why it's occurring, and this happened with both HTML5 and AS3:

     

    When I run through a program that includes checking variables and then it goes back to restart the program from the beginning:

    • If I have an alert saying that something needs to be checked the alert will only come up ONCE on the first play through
    • BUT on the second play through the same alert, that should only come up ONCE, pops up twice.
    • on the third play though it pops up three times
    • ON the fourth 4 and so on...

    Why is this occurring?

    How can I stop this from occurring?

    Here is a quick video showing what I am talking about, see attached.

    Thank you again!

    JoãoCésar17023019
    Community Expert
    January 31, 2022

    Hi.

     

    Sorry for the delay,

     

    This usually happens when you revisit a frame and listeners of the same type are added more than once to the same instance. Differently from AS3 documents, HTML5 instances are not totally removed from memory when we switch to another frame. Instances are only removed from the display list.

     

    One way to avoid this unwanted behavior is to run a simple check in the first frame - or somewhere else - like this:

    if (!this.started)
    {
        // do something
        this.started = true;
    }

     

    Please let us know if this the solution for your problem.

     

    Regards,

    JC

    Known Participant
    January 30, 2022

    FYI, I changed the variable to passwordDots so as to not create confusion in the code. Problem still persists, but the code looks better:

     

    var passwordDots = document.getElementById("passwordInput");

    passwordDots.setAttribute("type", "password");