How to shorten repetitive functions?

JavaScript
1

Is it possible to make a loop out of this:

function tArea0(){
	document.getElementById('txtarea_0').value = "";
	document.getElementById('count_txt').value = document.getElementById('count_txt').value -1;
}
function tArea1(){
	document.getElementById('txtarea_1').value = "";
	document.getElementById('count_txt').value = document.getElementById('count_txt').value -1;
}		
function tArea2(){
	document.getElementById('txtarea_2').value = "";
	document.getElementById('count_txt').value = document.getElementById('count_txt').value -1;
}
function tArea3(){
	document.getElementById('txtarea_3').value = "";
	document.getElementById('count_txt').value = document.getElementById('count_txt').value -1;
}
function tArea4(){
	document.getElementById('txtarea_4').value = "";
	document.getElementById('count_txt').value = document.getElementById('count_txt').value -1;
...
}
2

Sure you can:


var numerOfElements = 5;
for (var i = 0; i < numberOfElements; i++) {
    document.getElementByID('txtarea_'+ i).value = "";
    document.getElementByID('count_txt').value--;
}
3

For Functions?

4

If you look at your original list of functions, they all contain the exact same code except for one tiny thing. Make a function that will accept that value as a function argument.

5

i.e. :


function tArea(textarea_num){
	document.getElementById('txtarea_'+textarea_num).value = "";
	document.getElementById('count_txt').value = document.getElementById('count_txt').value -1;
}

Now tArea(0) does the same as your tArea0() function

6

Ok Thanks. Can you tell me how the function tArea(textarea_num) works? Is the variable textarea_num declared within the brackets?

7 
function mr(who){
	who= who || {};
	if(typeof who== 'string'){
		return document.getElementById(who);
	}
	return (who.nodeType== 1)? who: null;
}
function tarea(n){
        n+=1;
	mr('count_txt').value=mr('count_txt').value- n;
	while(n){
		mr('txtarea_'+(--n)).value= '';
		
	}
}

tarea(4);

8

How does textarea_num add incrementally according to the select tag’s value?

9

It doesn’t seem to work:

<table>
    <tbody><tr>

    	<td>
        <select id="ta" name="ta" onchange="changeTa();">
        	<option selected="selected" value="">How Many Textareas?</option>
            <option value="3">3 Textareas</option>
            <option value="5">5 Textareas</option>
            <option value="10">10 Textareas</option>
            <option value="20">20 Textareas</option>

            <option id="taall" value="all">All Textareas</option>
        </select>
    	</td>
    </tr>
<tr><td>
<textarea id="txtarea_0" rows="6" cols="20" name="txtar0" style="border: 1px solid Red; margin: 5px; padding: 0px 5px; float: left; width: 150px; height: 70px; color: Red; font-weight: bold;"></textarea>
	<input value=" Clear txtarea_0 " onclick="[B]tArea(textarea_num);[/B]" style="border-color: Red; margin: 5px; float: left; background-color: Red; color: rgb(255, 255, 255); font-weight: bold; font-size: 12px;" type="Reset">
</td></tr>
<tr><td>

<textarea id="txtarea_1" rows="6" cols="20" name="txtar1" style="border: 1px solid Blue; margin: 5px; padding: 0px 5px; float: left; width: 150px; height: 70px; color: Blue; font-weight: bold;"></textarea>
	<input value=" Clear txtarea_1 " onclick="[B]tArea(textarea_num);[/B]" style="border-color: Blue; margin: 5px; float: left; background-color: Blue; color: rgb(255, 255, 255); font-weight: bold; font-size: 12px;" type="Reset">
</td></tr>
<tr><td>
<textarea id="txtarea_2" rows="6" cols="20" name="txtar2" style="border: 1px solid Green; margin: 5px; padding: 0px 5px; float: left; width: 150px; height: 70px; color: Green; font-weight: bold;"></textarea>
	<input value=" Clear txtarea_2 " onclick="[B]tArea(textarea_num);[/B]" style="border-color: Green; margin: 5px; float: left; background-color: Green; color: rgb(255, 255, 255); font-weight: bold; font-size: 12px;" type="Reset">
</td></tr>
</tbody></table>

function tArea(textarea_num){
    document.getElementById('txtarea_'+textarea_num).value = "";
    document.getElementById('count_txt').value = document.getElementById('count_txt').value -1;
}
10

There are a number of ways of doing it, but you might be better off by using a simple loop construct.


var index = 0;
while (document.getElementById('txtarea_' + index)) {
    document.getElementById('txtarea_' + index).value = '';
    document.getElementById('count_txt').value -= 1;
    index += 1;
}

So that for each txtarea_0 up to the last sequential txtarea_n element, it will clear it, and reduce the count_txt value.