Skip to main content
M
morriarty23167261d1kp
Known Participant
February 15, 2022
Answered

password confirmation

  • February 15, 2022
  • 2 replies
  • 758 views

Hello, I'm a newbie whit Animate. This is a file HTML5Canvas.

I created 2 components (TextInput, Button) and a textdynamic box in my scene.

TextInput = mdp

Button = valider

 

 

The scene :

And I would like if the response is right when the user clicks the button, the text OK is displayed then redirected to a web page. And if the code is wrong, another text is displayed.

Here is my code :

this.stop();

var monInput = document.querySelector("mdp").value;
var motdepassatrouver = "test";

if (monInput == motdepassatrouver) {
	//ok
	this.valider.addEventListener("click", fl_ClickToGoToWebPage_5);

	function fl_ClickToGoToWebPage_5() {
		window.open("http://www.adobe.com", "_blank");
	}

}

But it does not work.
Looks like he can't make the connection with the ID of components.

Thanks a lot for your help.

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

    Just a last question please.

    If I want to add when it's validate OK, a change of frame
    I declare the function  :

    this.valider.addEventListener("click", fl_ClickToGoToAndStopAtFrame_18.bind(this));

function fl_ClickToGoToAndStopAtFrame_18()
{
	this.gotoAndStop(5);

    I shift the function at the beginning then I put this.gotoAndStop(5);

     in else if (value === motdepassatrouver) { }

     


    Hi again.

     

    I'm glad the code was useful.

     

    About your question: you already have a listener added to the validate button. You just need now to send the main timeline to the desired frame whenever the user enters the correct password. Like this:

    var root = this;
var responseTF = this.responseTF;
var motdepassatrouver = "test";
var input, button;

function onDrawEnd()
{
	input = document.getElementById("mdp");
	button = document.getElementById("valider");
	button.addEventListener("click", validate);
}

function validate()
{
	var value = input.value;

	if (value === "")
		responseTF.text = "Password cannot be empty.";
	else if (value === motdepassatrouver)
	{
		responseTF.text = "OK!";
		root.gotoAndStop(5); // NEW LINE
		window.open("http://www.adobe.com", "_blank");
	}
	else
	{
		responseTF.text = "Wrong password. Try again.";
	}

	input.value = "";
}

stage.on("drawend", onDrawEnd, root, true);

     

    Regards,

    JC

    2 replies

    kglad
    Community Expert
    kgladCommunity Expert
    Community Expert
    February 15, 2022

    1. if that code is on the initial frame of your main timeline, you have a timing problem because components aren't immediately initialized.

     

    2. you have a significant logic issue: your input component won't immediately have a value

     

    3. you're referencing your component incorrectly.

     

    to get that approach to work:

     

    1. put your input component on a movieclip timeline and assign the same instance name.

    2. put that movieclip (which contains mdp) on the 2nd frame of the main timeline along with your button and that dynamic textfield (with eg, tf instance name)

     

    you could then use on frame 1 (the 2nd frame)

     

    var monInput = document.getElementById("mdp");
    var motdepassatrouver = "test";


    //ok
    this.valider.addEventListener("click", fl_ClickToGoToWebPage_5.bind(this));

     

    function fl_ClickToGoToWebPage_5() {

    if (monInput == motdepassatrouver) {

    this.tf.text = "OK";   // though this won't be seen until the adobe popup closes.
    window.open("http://www.adobe.com", "_blank");
    }

    }

     

    M
    morriarty23167261d1kpAuthor
    Known Participant
    February 15, 2022

    Thank you for you answer.

    I tried JoãoCésar's code but nothing happens.

    However everything seems fine to me.

    File fla 

     

    JoãoCésar17023019
    Community Expert
    JoãoCésar17023019Community Expert
    Community Expert
    February 15, 2022

    Hi.

     

    You need to make sure the components are ready first. One way of doing this is to listen for the drawend event on the stage. Like this:

    var root = this;
var responseTF = this.yourResponseTextField;
var motdepassatrouver = "test";
var input, button;

function onDrawEnd()
{
	input = document.getElementById("mdp");
	button = document.getElementById("valider");
	button.addEventListener("click", validate);
}

function validate()
{
	var value = input.value;
	
	if (value === "")
		responseTF.text = "Password cannot be empty.";
	else if (value === motdepassatrouver)
	{
		responseTF.text = "OK!";
		window.open("http://www.adobe.com", "_blank");
	}
	else
	{
		responseTF.text = "Wrong password. Try again.";
	}

	input.value = "";
}

stage.on("drawend", onDrawEnd, root, true);

     

    I hope this helps.

     

    Regards,

    JC

    M
    morriarty23167261d1kpAuthor
    Known Participant
    February 15, 2022

    Thanks a lot for your help.

    I just tried but nothing happens. I do not understand why although it is very simple.

    I put the file.

    File fla 

    Thanks in advance.

    JoãoCésar17023019
    Community Expert
    JoãoCésar17023019Community Expert
    Community Expert
    February 15, 2022

    Thanks for the file.

     

    Change the second line of the code to:

    var responseTF = this.responseTF;

     

    So it matches the text field you have on stage.

     

    Regards,

    JC

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices