Javascript optimisation and few questions

New Here ,
Feb 21, 2021

Copy link to clipboard

Copied

Good evening everybody.

I am attempting to create a few math based html5 documents. While I have the first version with pushing the button to do calculations sort of working, I have a few questions:

1) Is my code optimal ? Keeping in mind, I would like to add alot more variables and much more complicated math in the future. Should I change or organize something better ?

2) Is it possible to toggle value "c" with the same button ? One workaround with this would be to create a second button on another frame and reference frames between each other, but using the same button ?

this.ctoggle.addEventListener("click", fl_MouseClickHandler_2.bind(this)); 
{
	c = 3;
	//on pressing ctoggle button, should toggle values between 3 and 2
}

this.ctoggle.addEventListener("click", fl_MouseClickHandler_2.bind(this));	
function fl_MouseClickHandler_2()
{
	c = 2;
	//on pressing ctoggle button, should toggle values between 3 and 2
}



this.calculate.addEventListener("click", fl_MouseClickHandler.bind(this));	//on pressing calculate button

function fl_MouseClickHandler(){
	var a = Number(document.getElementById("ainput").value);	//input textbox for a value
	var b = Number(document.getElementById("binput").value);	//input textbox for b value
	var x=a+b;
	var y=x*(a+b);
	var z=y/c;
	
	this.xoutput.text = x;		//textbox for x value output
	this.youtput.text = y;		//textbox for y value output	
	this.zoutput.text = z;		//textbox for z value output
	
}

I am also trying to do the same line of code without a "calculate" button. Making the values a live update. But not having much luck. What should I change here ?

/*
this.ctoggle.addEventListener("click", fl_MouseClickHandler_2.bind(this));
function fl_MouseClickHandler_2()
{
	c = 3;
	
}

this.ctoggle.addEventListener("click", fl_MouseClickHandler_2.bind(this));
function fl_MouseClickHandler_2()
{
	c = 2;
	
}
*/

function values ()
{	
	var x=a+b;
	var y=x*(a+b);
	var z=y/c;
	
	this.xoutput.text = x;
	this.youtput.text = y;
	this.zoutput.text = z;
}	
setTimeout(function()
{
	var a = Number(document.getElementById("ainput").value);
	var b = Number(document.getElementById("binput").value);
	
	a.addEventListener("change", values);
	a.addEventListener("input", values);
	
	b.addEventListener("change", values);
	b.addEventListener("input", values);
	
}, 0);

Thank you for reading

Views

25

Likes

Translate

Translate

Report

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

Copy link to clipboard

Copied

Saying "not having much luck" doesn't give us much to work with. Be specific.

 

I assume you've verified that the value of "this" is what you think it should be in the event handler?

Likes

Translate

Translate

Report

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

Copy link to clipboard

Copied

your code's not optimal (as you already know) because it's not easily extendable to (currently) unknown values to toggle/rotate amoung and there's no apparent reason to have separate toggle and calculate functions when the toggle doesn't really do much.

 

var index = 0;

var toggleA = [2,3,5,8,13];  // easily extendable/changable.  0 not allowed.

this.calculateButton.addEventListener("click",calculateF);

 

function calculateF(){

var c = toggleA[index];

index = (index+1)%toggleA.length;

var a = Number(document.getElementById("ainput").value); //input textbox for a value
var b = Number(document.getElementById("binput").value); //input textbox for b value

// you should have some error checking to insure a and b are numbers.  eg,

if(isNaN(a)){

a = 0;

}

if(isNaN(b)){

b = 0;

}

var x=a+b;
var y=x*x;
var z=y/c;
this.xoutput.text = x; //textbox for x value output
this.youtput.text = y; //textbox for y value output
this.zoutput.text = z;

}

Likes

Translate

Translate

Report

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