Help: A simple Text input and dynamic output (HTML5)

[smsali]

Hey guys! I'm looking for codes to input text and output it on another frame. I'm not a coder but I tried and made it work on .fla format using this code:

Input:

var nameTXT:String;

nameTXT_button.addEventListener(MouseEvent.CLICK, nextClick);

function captureText(): void

{nameTXT=name_TXT.text

    }

function nextClick(e:MouseEvent):

    void

    {

        captureText(); nextFrame();

        }

Output:

nameoutputTXT.text=nameTXT;

platform_button.addEventListener(MouseEvent.CLICK, platformClick);

function platformClick(e:MouseEvent):

    void

    {

        nextFrame();

        }

products_button.addEventListener(MouseEvent.CLICK, productClick);

function productClick(e:MouseEvent):

    void

    {

        gotoAndStop(15);

        }

And its working perfectly fine. But i require this same function on HTML framework. Can someone please write this short code for me? Again, I'm not at all a coder but open to learn more as i proceed. i have seen people doing it using java and other languages but it's all going over my head.

[JoãoCésar · Accepted solution]

Hi.

Notice that I had to put each text field inside of a Movie Clip because I was getting reference errors on the second frame. I'm not pretty sure why.

Frame 1:

var that = this;
this.nameTXT = 2;
function captureText()
{
    that.nameTXT = that.text1.name_TXT.text;   
}
function nextClick(e)
{
    captureText();
    that.gotoAndStop(that.timeline.position + 1);
}
this.stop();
this.nameTXT_button.addEventListener("click", nextClick);

Frame 2:

var that = this;
function platformClick(e)
{
    that.gotoAndStop(that.timeline.position + 1);
}
function productClick(e)
{
    that.gotoAndStop(14); // Frame numbers in EaselJS start at 0 instead of 1
}
this.text2.nameoutputTXT.text = this.nameTXT;
this.platform_button.addEventListener("click", platformClick);
this.products_button.addEventListener("click", productClick);

Anyway, you could just extend your text field until the frame 15 (14) and you wouldn't have to worry about this text input and output thing.

Regards,

JC

[smsali]

Thanks for the code Cesar! That was really a good help, appreciate it! I can read and understand the flow it is making but unfortunately it doesn't work with the current frames i designed and moved ahead. these are the frame codes i have in the current flow.

Frame 1:

this.stop();  

this.nameTXT_button.addEventListener("click", fl_ClickToGoToAndStopAtFrame_4.bind(this));

function fl_ClickToGoToAndStopAtFrame_4()

{

    this.gotoAndStop(1);

}

Frame 2:

this.stop();

this.products_btn.addEventListener("click", fl_ClickToGoToAndStopAtFrame.bind(this));

function fl_ClickToGoToAndStopAtFrame() {

    this.gotoAndPlay(2);

}

I know it may look like a joke but as i said, not a coder. Just going ahead on path i get lol. Do you think you can add a few text to these codes to make text field work?

Regards.

[JoãoCésar]

Hi again!

I'm glad it helped you!

Here is:

Frame 1:

var that = this;
this.nameTXT = "";
function captureText()
{
    that.nameTXT = that.text1.name_TXT.text;   
}
function fl_ClickToGoToAndStopAtFrame_4()
{
    captureText();
    this.gotoAndStop(1);
}
this.stop();
this.nameTXT_button.addEventListener("click", fl_ClickToGoToAndStopAtFrame_4.bind(this));

Frame 2:

function fl_ClickToGoToAndStopAtFrame()
{
    this.gotoAndPlay(2);
}
this.text2.nameoutputTXT.text = this.nameTXT;
this.products_btn.addEventListener("click", fl_ClickToGoToAndStopAtFrame.bind(this));

Once again, please notice it that I put each text field inside of Movie Clips, called "text1" and "text2".

Please don't hesitate to ask if you stil have any further question.

Regards,

JC

[smsali]

Hey JC! Thanks so much again for coding down completely for me. Unfortunately i'm not able to get the output as needed. I understood your code and seems perfect to me but still not happening.

This code in Frame 1:

that.nameTXT = that.text1.name_TXT.text;

is that 'name_TXT' on purpose or a typo? i can't figure out why '_' is between nameTXT element. If i keep it that way, i'm not able to go to frame 2. Although changing it back from 'name_TXT' to 'nameTXT' lets me get through but no output in the Frame 2. In Frame 2, i created a dynamic text box, named it as nameoutputTXT and made it a movie clip named text2 (similarly done in Frame 1 for Text Input field i.e. nameTXT and created it movie clip naming text1). Am i doing this the right way?

Thanks!

[JoãoCésar]

Hi again.

nameTXT is a variable to store the text field's text.

name_TXT is the text filed on the stage.

And these are the names that you assigned. I just followed. rs

Anyway, here is a working FLA to clariy your doubts: text_input_output.zip - Google Drive .