Skip to main content
Participant
February 21, 2021
Question

Javascript optimisation and few questions

  • February 21, 2021
  • 2 replies
  • 211 views

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

    This topic has been closed for replies.

    2 replies

    kglad
    Community Expert
    Community Expert
    February 22, 2021

    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;

    }

    Legend
    February 22, 2021

    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?