Adobe Animate Math

[Rannn]

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 ?

[JoãoCésar]

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

[Rannn]

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ésar]

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

[Rannn]

Yes, thank you. Very helpful. 

Just one last question if you dont mind.

Do you think its possible to assign the textboxes as global variables that I am able to use in multiple functions ?

They work fine in a single function. Without it, they give a 0 value.

From what I understand the solution would be to delay getelementbyid until ive typed something in the textbox, or have a function within a function or maybe something better ?

[JoãoCésar]

Hi. Yeah, it's possible.

Like this:

var root = this;

// notice that the "var" keyword is not being used. In this way, the variables become global. It's the same as writing window.a and window.b.
a = undefined; 
b = undefined;

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();

But as using lots of global variables is not a recommended practice, maybe it will be better to create only one property, like textFields, and then store the text fields as properties of textFields resulting in textFields.a and textFields.b.

You can also store your text fields as properties of the main timeline by writing root.a, root.b or exportRoot.a, exportRoot.b.

Regards,

JC