My TextInput and Submit Button are not working.

[mary_0172]

Hi guys, 

so I'm new to Adobe Animate 2024 CC The last time I used Adobe Animate was Adobe Flash Professional CS6, and so I've been trying to make a text input component along with a submit button. So, for example, if the correct answer to a question was "53", and you type that into the text input and hit submit, it will check to see if it matches and then do this.gotoAndPlay("frame that tells you you're correct') and if what you answered wasn't 53, it will gotoAndPlay("frame that tells you you're wrong.) However, every time I enter an input into my input box and hit the submit button, it does not respond at all, and it doesn't do anything. So I'd really appreciate it if someone could help me in this situation. Here's my code below.

this.stop();

this.submitbtn.addEventListener("click", function(event) {
var val = this.answerbox.text;
if (val.toLowerCase().trim() === "correctanswer") {
this.gotoAndPlay(72);
} else {
this.gotoAndPlay(13);
}
}.bind(this));

[kglad]

html5?

insert alert(val)

after cal is defined 

check dev. console for errors 

[mary_0172]

Yeah it's html5,

thanks i'll try this

[kglad]

keep us updated.

[mary_0172]

so it keeps saying that my answerbox doesn't exists even tho my instancename is answerbox for the textinput component and It's frustrating because I don't know what else to change, all the layers and actions start on frame 1 yet when I type something into to my inputbox it the submit button will not register it and send me to the corresponding frame.

[mary_0172]

I've tried fixing the code above but it keeps identifying my inputbox as undefined.

[kglad]

oh, if you use a component you can also check its reference by lifting the code from a snippet.

[JoãoCésar · Accepted solution]

Hi.

Components don't live in the canvas and are not CreateJS objects, so you'll need to use one of the DOM methods to access it first. Like this:

this.stop();
	
this.submitbtn.addEventListener("click", function (event)
{
	var val = document.getElementById("answerbox").value;
	
	if (val.toLowerCase().trim() === "correctanswer")
	{
		this.gotoAndPlay(72);
	}
	else
	{
		this.gotoAndPlay(13);
	}
}.bind(this));

Regards,
JC

[mary_0172]

Hi JC,

I tried your code and put it into the actions layer of my project. I tried typing something into my inputanswer box and pressin the submit button, but it still isn't functioning the submit button just does not do anything. I have my submit button set as a button with it's up down, over, and hit stages and its instance name matches the one in the actions tab, but it still will not take me to the appropiate frame when i press the submit button after putting something in the inputbox. 

[kglad]

what's the developer console say?

[mary_0172]

It says nothing but this
WARNINGS:
Frame numbers in EaselJS start at 0 instead of 1. For example, this affects gotoAndStop and gotoAndPlay calls. (2)

[kglad]

that's standard.

put a console.log("xx") in your listener and recheck.

[mary_0172]

Oh wow, that actually worked. The code takes me to the correct frame whether I enter the correct information or not.

this.stop();

this.submitbtn.addEventListener("click", function (event)

{

console.log("Submit button was clicked!"); 

var val = document.getElementById("answerbox").value;

if (val.toLowerCase().trim() === "42")

{

this.gotoAndPlay(23);

}

else

{

this.gotoAndPlay(31);

}

}.bind(this));

[kglad]

do you see that quote?

if so, use val instead.

[JoãoCésar]

Alright.

Do you have 73 frames in the main timeline? If so, do you have a stop call in the last frame?

[mary_0172]

I don't have 73 frames, I have 104 frames, and yes, I do have a stop on the last frame.

[JoãoCésar]

Do you mind sharing your FLA?