How to transform 2 similar functions in only one ?

helloJS · 03-11-2012, 12:19 PM

Hello, I have the code in the annexe wich is working but grossly redondant, clearly, I would like to have only one function toggleEditor(), that would manage the global variables editInstance with a parameter or something equivalent to avoid having 2 twin like functions. Thanks for your suggestions.

HJS

Annexe :

Code:

 
<html>
<body>

<script src="../flovinax.js" type="text/javascript"></script>
<script>
var editInstance= null;
function toggleEditor1(edtN) {
	if(editInstance===null) {
		editInstance = new flovinaxa({fullPanel : true}).panelInstance(edtN);
	} else {
		editInstance.removeInstance(edtN);
		editInstance= null;
	}
}

var editInstance2= null;
function toggleEditor2(edtN) {
	if(editInstance2===null) {
		editInstance2 = new flovinaxa({fullPanel : true}).panelInstance(edtN);
	} else {
		editInstance2.removeInstance(edtN);
		editInstance2= null;
	}
}
</script>	


<div>
	<textarea style="width: 800px; height: 200px;" id="myArea"></textarea>
	<br />
	<button onClick="toggleEditor1('myArea');">+</button>
</div>
<div style="clear: both;"></div>


<div>
	<textarea style="width: 800px; height: 200px;" id="myArea2"></textarea>
	<br />
	<button onClick="toggleEditor2('myArea2');">+</button>
</div>
<div style="clear: both;"></div>

</body>
</html>

helloJS · 03-11-2012, 01:11 PM

I got it ... (create an object so it's passed with the address) how asking is already solving a bit! Here we are (code tested and ok) :

Code:

<html>
<head>
</head>
<body>


<script src="../flovinax.js" type="text/javascript"></script>

<script type="text/javascript">
function toggleEditor(edtX, edtN) {
	if(edtX.edt===null) {
		edtX.edt = new flovinaxa({fullPanel : true}).panelInstance(edtN);
	} else {
		edtX.edt.removeInstance(edtN);
		edtX.edt= null;
	}
}
</script>	


<h4>Textarea Example</h4>
<div>
	<textarea style="width: 800px; height: 200px;" id="boxA"></textarea>
	<br />
	
	<script type="text/javascript">
		edtA={edt:null};	// THE OBJECT edtA
	</script>	
	
	<button onClick="toggleEditor(edtA,'boxA');">+</button>
</div>
<div style="clear: both;"></div>



<h4>Textarea Example</h4>
<div>
	<textarea style="width: 800px; height: 200px;" id="boxB"></textarea>
	<br />
	
	<script type="text/javascript">
		edtB={edt:null};	// THE OBJECT edtB
	</script>		
	
	<button onClick="toggleEditor(edtB,'boxB');">+</button>
</div>
<div style="clear: both;"></div>



</div>

</body>
</html>

vwphillips · 03-11-2012, 02:22 PM

Code:

<html>
<body>

<script src="../flovinax.js" type="text/javascript"></script>
<script>

function toggleEditor(edtN) {
	if(!toggleEditor[edtN]) {
		editInstance = new flovinaxa({fullPanel : true}).panelInstance(edtN);
        toggleEditor[edtN]=true
	}
    else {
		editInstance.removeInstance(edtN);
		toggleEditor[edtN]= false;
	}
}

</script>


<div>
	<textarea style="width: 800px; height: 200px;" id="myArea"></textarea>
	<br />
	<button onClick="toggleEditor('myArea');">+</button>
</div>
<div style="clear: both;"></div>


<div>
	<textarea style="width: 800px; height: 200px;" id="myArea2"></textarea>
	<br />
	<button onClick="toggleEditor('myArea2');">+</button>
</div>
<div style="clear: both;"></div>

</body>
</html>