Adobe Animate Math

New Here ,
Feb 14, 2021 Feb 14, 2021

Copy link to clipboard

Copied

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 ?

 

Views

89

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Feb 14, 2021 Feb 14, 2021

Copy link to clipboard

Copied

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

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 14, 2021 Feb 14, 2021

Copy link to clipboard

Copied

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)

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Feb 14, 2021 Feb 14, 2021

Copy link to clipboard

Copied

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

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 14, 2021 Feb 14, 2021

Copy link to clipboard

Copied

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 ?

 

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Feb 15, 2021 Feb 15, 2021

Copy link to clipboard

Copied

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

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines