2 Replies Latest reply on Jul 3, 2017 6:12 AM by dominicc37295994

    [CANVAS] dynamic text input to output

    dominicc37295994

      Hello, new to posting here. This is my experimental project for a numeric keypad that I have. I have been studying this forum for all kinds of stuff over the past few months and have got lots of useful info.

      The problem I am getting is shown in the image above in the output text box. The user would press any combo of numbers and then press enter to populate the output box. The eventual use will be to input a map grid reference so will require letters at some point

       

      I've been adapting the 'code snippets' within Animate CC and from what I have seen here on this Forum, but unable to decipher how to write or identify the code I need to make this work. This is the code I have created so far. Apologies if it's not how it should be done, so be patient with me because I think in Pictures & Patterns as I'm not 'code clever'.

       

      //--

      this.stop();

      this.button.rotation=0;

      //--Global Variables

      //

      var displayInputNumbers = this.myNumbersInput;

       

      //-- Functions

      function clickToGoToTwenty(){

      this.gotoAndStop("twenty");

      this.myNumbersInput.text = "";

      this.myNumbersOutput.text = "";

      }

       

      function displayNumberOne(){

      this.myNumbersInput.text += "1";

      }

       

      function displayNumberTwo(){

      this.myNumbersInput.text += "2";

      }

       

      function displayNumberThree(){

      this.myNumbersInput.text += "3";

      }

       

      function displayNumberFour(){

      this.myNumbersInput.text += "4";

      }

       

      function displayNumberFive(){

      this.myNumbersInput.text += "5";

      }

       

      function displayNumbersEntered(){

      this.myNumbersOutput.text = displayInputNumbers;

      }

       

      function cancelNumbersDisplayed(){

      this.myNumbersInput.text = "";

      this.myNumbersOutput.text = "";

      }

       

      //-- Event Listeners

      this.button.addEventListener("click", clickToGoToTwenty.bind(this));

       

      this.oneButton.addEventListener("click", displayNumberOne.bind(this));

       

      this.twoButton.addEventListener("click", displayNumberTwo.bind(this));

       

      this.threeButton.addEventListener("click", displayNumberThree.bind(this));

       

      this.fourButton.addEventListener("click", displayNumberFour.bind(this));

       

      this.fiveButton.addEventListener("click", displayNumberFive.bind(this));

       

      this.enterButton.addEventListener("click", displayNumbersEntered.bind(this));

       

      this.cancelButton.addEventListener("click", cancelNumbersDisplayed.bind(this));

       

      //--

       

      Thank you, for being here.

       

      Dom

        • 1. Re: [CANVAS] dynamic text input to output
          JosephLabrecque Adobe Community Professional

          Hi, Dom.

           

          If I'm understanding correctly, you'd like to format the output differently? I see that in the following method, you are outputing a reference to the text object itself:

           

          function displayNumbersEntered(){

          this.myNumbersOutput.text = displayInputNumbers;

          }

           

          If you want to grab only the text from "displayInputNumbers", you will need to grab "displayInputNumbers.text" instead. If there are other calculations or character format issues to deal with, you could process those in this method previous to output.

          1 person found this helpful
          • 2. Re: [CANVAS] dynamic text input to output
            dominicc37295994 Level 1

            Thank you Joseph (been watching some of your tutorials on Lynda.com). It worked.

             

            How or why I just can't fathom yet but if I keep staring at it long enough something will click.

             

            So, to the many like me out there all I did to fix was (bit in bold italic):

             

            function displayNumbersEntered(){

            this.myNumbersOutput.text = displayInputNumbers.text;

            }

             

            Thanks again.

             

            Dom