Javascript optimisation and few questions

[Rannn]

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

[ClayUUID]

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?

[kglad]

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;

}