password confirmation

[morriarty23167261d1kp]

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.

[JoãoCésar · Accepted solution]

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

[morriarty23167261d1kp]

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ésar · Accepted solution]

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

[morriarty23167261d1kp]

Hello,

Yes thank you very much it works. See you soon and thank you sincerely.

[morriarty23167261d1kp]

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) { }

[JoãoCésar · Accepted solution]

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

[morriarty23167261d1kp]

Yes very useful thank you.

OK, I understand better now for the function.

Thanks for your help. Have a nice day

[kglad]

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");
}

}

[morriarty23167261d1kp]

Thank you for you answer.

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

However everything seems fine to me.

File fla