How to force changing var number by event listener

[berzins]

Hi, gurus and JS superheroes!
I'm a newbie in scripting and coding, so sorry for my mistakes and possibly wrong definitions. I hope you will understand what the problem is there.

I'm trying to make a 2 slider calculator with 2 bonus calculation options.

The basics is NumSlider1 * NumSlider2 * Multiplier(Option 1 or 2).

I started with a script that I found here in the forum created by some genius @JoãoCésar.
I duplicated the first slider and made a first level calculations to live - sliders now multiplying. That's fine. Then I created "checkboxes" and found the way how to click them to and back.

Here is where I stuck. I can't force my "checkbox" to add and change the number in the variable. The goal is to Add a bigger number to the "multiplier" by clicking on Option 2.

Here are the resources - Fla. (I hope it will go through customs here)
https://drive.google.com/drive/folders/12ESJ89wR16sJtmk3PkTXnakOj727nuKe?usp=sharing

And here is all the code actually. Maybe somebody can tell from here what's actually wrong.
The VAR MULTI is my poor and sick variable, I try to force to change with my event listeners for checkboxes.

var multi = 12;

/* this stops movie to display checkmark checked in "Option1" as page loads */
this.check_square_n.gotoAndStop(24);

/*This are 2 event listeners and commands to play and stop both checkmark movies keeping ability to check & recheck back*/

this.check_square_n.addEventListener("click", fl_MouseClickHandler1.bind(this));
function fl_MouseClickHandler1()
{
	this.check_square_n.gotoAndPlay(2);
	this.check_square_y.gotoAndStop(1);
	/* this.multi = 12; */
}

this.check_square_y.addEventListener("click", fl_MouseClickHandler2.bind(this));
function fl_MouseClickHandler2()
{
	this.check_square_y.gotoAndPlay(2);
	this.check_square_n.gotoAndStop(1);
	/* this.multi = 22; */
}

/*--------------------------- This all two sliders and calculations --------------------------*/

this.button1.on("mousedown", function (e) {
	e.target.offsetX = (e.stageX / stage.scaleX) - e.target.x;
}.bind(this));
this.button1.on("pressmove", function (e) {
	e.target.x = this.clamp1((e.stageX / stage.scaleX) - e.target.offsetX, this.bar1.x, this.bar1.x + this.bar1.nominalBounds.width);
	this.setProportion();
}.bind(this));

this.button2.on("mousedown", function (e) {
	e.target.offsetX = (e.stageX / stage.scaleX) - e.target.x;
}.bind(this));
this.button2.on("pressmove", function (e) {
	e.target.x = this.clamp2((e.stageX / stage.scaleX) - e.target.offsetX, this.bar2.x, this.bar2.x + this.bar2.nominalBounds.width);
	this.setProportion();
}.bind(this));


this.setProportion = function () {
	var prop1 = (this.button1.x - this.bar1.x) / this.bar1.nominalBounds.width;
	var prop2 = (this.button2.x - this.bar2.x) / this.bar2.nominalBounds.width;

	var euro = Math.round(prop1 * 100);
	var year = Math.round(Math.round(prop2 * 100) * 0.3);

	/*These are displayed numbers linked to sliders*/
	this.txt1.text = euro;
	this.txt2.text = year;

	/* These 2 rows are for design only, to reveal color in slider left sides*/
	this.bar1.gotoAndStop(Math.floor(this.bar1.timeline.duration * prop1));
	this.bar2.gotoAndStop(Math.floor(this.bar2.timeline.duration * prop2));

	/* ------------------- This calculates the sum --------------
	!!! And this is the place where I would like to use "multi" as variable number defined by clicking on one or another "Option"   -------- */
	this.calc.text = euro*year*multi;
	
	/*This is for my visual control only. Will be removed from screen*/
	this.multiX.text = multi;
	
}.bind(this);


/*---------- This defines range of sliders ------ */

this.clamp1 = function (value, min, max) {
	if (value < min)
		return min +4;
	else if (value > max)
		return max;
	else
		return value;
}

this.clamp2 = function (value, min, max) {
	if (value < min)
		return min + 8;
	else if (value > max)
		return max;
	else
		return value;
}


/* --------- This sets numbers and sliders displayed on first load -------- */
setTimeout(this.setProportion, 0);

/*-------- THE END OF THE MAGIC -------*/

Thanks in advance!

[JoãoCésar · Accepted solution]

Hi,

I'm glad that code helped you!

Since multi is a variable and not a property of any object, then you must refer to it by name directly without the this keyword.

Your code would look like this:

function fl_MouseClickHandler1()
{
	this.check_square_n.gotoAndPlay(2);
	this.check_square_y.gotoAndStop(1);
	multi = 12; 
}

function fl_MouseClickHandler2()
{
	this.check_square_y.gotoAndPlay(2);
	this.check_square_n.gotoAndStop(1);
	multi = 22; 
}

Please tell us if this solves the problem.

Regards,

JC

[berzins]

Thanks!
This actually did the trick.

Anyway - this finally works not exactly what I expected, even with some fine-tuning I did after 😞
First, after removing the "this" keyword, I realized my variable updates only after touching one or another slider after checking the checkbox. Then I added "setTimeout" to both EventListeners functions. It does the trick again. But to force do the calculations right after the action - clicking checkboxes or dragging sliders, the only way I found was to move my checkbox eventListeners inside "setProportion" function. Probably this is cause some of the variables are defined within the function (I don't know...)

Now there are two main problems - instability - it tends to freeze after numerous clicking and sliding.
And second - the main problem ... it still not calculates properly. There actually are 4 variables in the calculation - Slider1; Slider2; Check1; Check2.  And Check2 ("multi" in my script) uses also data from Slider2. And final calculations are not updating properly. Sometimes it needs to recheck to load Slider2 data to multiplier again.

I'm probably going to give up on this - my knowledge is way too short in JS and coding. It seems I just started from the wrong place - this slider was made for other needs and adapting it for me probably is the wrong way. I need to start thinking about making it from null. Anyway - I also need the sliders to be not 1-100%, but from my own defined range, etc.

Thanks for helping.