SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Canada
    Posts
    730
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to shorten repetitive functions?

    Is it possible to make a loop out of this:
    Code:
    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;
    ...
    }
    Compare bible texts (and other tools):
    TheWheelofGod

  2. #2
    SitePoint Addict
    Join Date
    Jan 2005
    Location
    Ireland
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sure you can:

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

  3. #3
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Canada
    Posts
    730
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Ryan Wray View Post
    Sure you can:

    Code:
    var numerOfElements = 5;
    for (var i = 0; i < numberOfElements; i++) {
        document.getElementByID('txtarea_'+ i).value = "";
        document.getElementByID('count_txt').value--;
    }
    For Functions?
    Compare bible texts (and other tools):
    TheWheelofGod

  4. #4
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2008
    Posts
    5,757
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,080
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by crmalibu View Post
    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.
    i.e. :

    Code javascript:
    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. #6
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Canada
    Posts
    730
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ScallioXTX View Post
    i.e. :

    Code javascript:
    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
    Ok Thanks. Can you tell me how the function tArea(textarea_num) works? Is the variable textarea_num declared within the brackets?
    Compare bible texts (and other tools):
    TheWheelofGod

  7. #7
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    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. #8
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Canada
    Posts
    730
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gilgalbiblewheel View Post
    Ok Thanks. Can you tell me how the function tArea(textarea_num) works? Is the variable textarea_num declared within the brackets?
    How does textarea_num add incrementally according to the select tag's value?
    Compare bible texts (and other tools):
    TheWheelofGod

  9. #9
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Canada
    Posts
    730
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It doesn't seem to work:
    Code HTML4Strict:
    <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>
    Code JavaScript:
    function tArea(textarea_num){
        document.getElementById('txtarea_'+textarea_num).value = "";
        document.getElementById('count_txt').value = document.getElementById('count_txt').value -1;
    }
    Compare bible texts (and other tools):
    TheWheelofGod

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,707
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by gilgalbiblewheel View Post
    How does textarea_num add incrementally according to the select tag's value?
    There are a number of ways of doing it, but you might be better off by using a simple loop construct.

    Code javascript:
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •