Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

Javascript optimisation and few questions

New Here ,
Feb 21, 2021 Feb 21, 2021

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

181
Translate
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
LEGEND ,
Feb 21, 2021 Feb 21, 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?

Translate
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
Community Expert ,
Feb 22, 2021 Feb 22, 2021
LATEST

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;

}

Translate
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