Skip to main content
R
Rannn
Participant
February 14, 2021
Question

Adobe Animate Math

  • February 14, 2021
  • 1 reply
  • 662 views

Good evenening everybody.

 

I would like to create myself a few interactive HTML5 files with Javascript containing simple math.

I have a very simple problem, I would ask your for this. In this code, I have 3 text boxes, 2 of them are inputs and 1 is the output. By entering numbers in the input boxes, the output simply adds their sum, when clicking the button I referred to.

The text input boxes are from Adobe Animate>Window>Components>TextInput

The code looks as:

 

this.stop();

var a = document.getElementById("atext"); //atext refers to TexInput box instance name
var b = document.getElementById("btext"); //bext refers to TextInput box instance name


this.start.addEventListener("click", fl_MouseClickHandler.bind(this));  //start refers to the start button

function fl_MouseClickHandler() {

var c = a + b;
this.ctext.text = c;  //prints out the output sum value in third text box
}

 

Near as I can tell, the issue is with the text/number inputs.

Any ideas how to fix this ?

 

    This topic has been closed for replies.

    1 reply

    JoãoCésar17023019
    Community Expert
    JoãoCésar17023019Community Expert
    Community Expert
    February 14, 2021

    Hi.

     

    You're trying to add the text input themselves and not their values. Also, in Animate, components are not ready to be referenced in the first tick. To fix this delay, you could use the setTimeout method or just try to reference the components when the click happens. Liks this:

    var a, b;

function fl_MouseClickHandler()
{
    var c;
	
    a = document.getElementById("atext");
    b = document.getElementById("btext");
    c = Number(a.value) + Number(b.value);
    this.ctext.text = c;
}

this.stop();
this.start.addEventListener("click", fl_MouseClickHandler.bind(this));

     

    I hope this helps.

     

    Regards,

    JC

    R
    RannnAuthor
    Participant
    February 14, 2021

    I see,  is there maybe a way to make it "live" then  ? 

    Meaning without pressing the button, we instead get the sum to c when we change the values in a and b.

    From what I understand, enterframe would be the actionscript command ? And an alternate for javascript would be:

    setInterval(function(){console.log('enterframe')}, 24)

    JoãoCésar17023019
    Community Expert
    JoãoCésar17023019Community Expert
    Community Expert
    February 14, 2021

    The input and change events should do the trick. Like this:

    var root = this;
var a, b;

function add()
{
	if (!isNaN(a.value) && !isNaN(b.value))
		root.ctext.text = Number(a.value) + Number(b.value);
}

setTimeout(function()
{
	a = document.getElementById("atext");
	b = document.getElementById("btext");
	
	a.addEventListener("change", add);
	a.addEventListener("input", add);
	
	b.addEventListener("change", add);
	b.addEventListener("input", add);
}, 0);

root.stop();

     

    Remember that in HTML5 Canvas, Animate uses JavaScript so any property or method from the language should work.

     

    Regards,

    JC

    Firefly Community Gallery
    Adobe Firefly

    Remix with Firefly Community Gallery

    Thousands of free creations to fall in love with and remix in Firefly.

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