Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    Mar 2003
    Posts
    165
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question optimizing script

    how can i do the same thing but in a more efficient way? Thanks:

    <SCRIPT LANGUAGE="javascript">
    <!--
    function addit1() {
    if (document.MainForm.A1.value>'0') {var A1 = eval(document.MainForm.A1.value);}else{A1=0;}
    if (document.MainForm.A2.value>'0') {var A2 = eval(document.MainForm.A2.value);}else{A2=0;}
    if (document.MainForm.A3.value>'0') {var A3 = eval(document.MainForm.A3.value);}else{A3=0;}
    if (document.MainForm.A4.value>'0') {var A4 = eval(document.MainForm.A4.value);}else{A4=0;}
    if (document.MainForm.A5.value>'0') {var A5 = eval(document.MainForm.A5.value);}else{A5=0;}
    aa1 = eval(A1 + A2 + A3+ A4 + A5);
    at1 = eval(100 - aa1);
    document.getElementById("v1").innerHTML = at1;
    }
    function addit2() {
    if (document.MainForm.B1.value>'0') {var B1 = eval(document.MainForm.B1.value);}else{A1=0;}
    if (document.MainForm.B2.value>'0') {var B2 = eval(document.MainForm.B2.value);}else{A2=0;}
    if (document.MainForm.B3.value>'0') {var B3 = eval(document.MainForm.B3.value);}else{A3=0;}
    if (document.MainForm.B4.value>'0') {var B4 = eval(document.MainForm.B4.value);}else{A4=0;}
    if (document.MainForm.B5.value>'0') {var B5 = eval(document.MainForm.B5.value);}else{A5=0;}
    aa2 = eval(B1 + B2 + B3+ B4 + B5);
    at2 = eval(100 - aa2);
    document.getElementById("v2").innerHTML = at2;
    }
    function addit3() {
    if (document.MainForm.C1.value>'0') {var C1 = eval(document.MainForm.C1.value);}else{C1=0;}
    if (document.MainForm.C2.value>'0') {var C2 = eval(document.MainForm.C2.value);}else{C2=0;}
    if (document.MainForm.C3.value>'0') {var C3 = eval(document.MainForm.C3.value);}else{C3=0;}
    if (document.MainForm.C4.value>'0') {var C4 = eval(document.MainForm.C4.value);}else{C4=0;}
    if (document.MainForm.C5.value>'0') {var C5 = eval(document.MainForm.C5.value);}else{C5=0;}
    aa3 = eval(C1 + C2 + C3+ C4 + C5);
    at3 = eval(100 - aa3);
    document.getElementById("v3").innerHTML = at3;
    }
    function addit4() {
    if (document.MainForm.D1.value>'0') {var D1 = eval(document.MainForm.D1.value);}else{D1=0;}
    if (document.MainForm.D2.value>'0') {var D2 = eval(document.MainForm.D2.value);}else{D2=0;}
    if (document.MainForm.D3.value>'0') {var D3 = eval(document.MainForm.D3.value);}else{D3=0;}
    if (document.MainForm.D4.value>'0') {var D4 = eval(document.MainForm.D4.value);}else{D4=0;}
    if (document.MainForm.D5.value>'0') {var D5 = eval(document.MainForm.D5.value);}else{D5=0;}
    aa3 = eval(D1 + D2 + D3+ D4 + D5);
    at3 = eval(100 - aa3);
    document.getElementById("v3").innerHTML = at3;
    }
    function addit5() {
    if (document.MainForm.E1.value>'0') {var E1 = eval(document.MainForm.E1.value);}else{E1=0;}
    if (document.MainForm.E2.value>'0') {var E2 = eval(document.MainForm.E2.value);}else{E2=0;}
    if (document.MainForm.E3.value>'0') {var E3 = eval(document.MainForm.E3.value);}else{E3=0;}
    if (document.MainForm.E4.value>'0') {var E4 = eval(document.MainForm.E4.value);}else{E4=0;}
    if (document.MainForm.E5.value>'0') {var E5 = eval(document.MainForm.E5.value);}else{E5=0;}
    aa3 = eval(E1 + E2 + E3+ E4 + E5);
    at3 = eval(100 - aa3);
    document.getElementById("v3").innerHTML = at3;
    }
    -->
    </SCRIPT>

    //////// HTML /////////////

    <p align="right">&nbsp;TOTAL</td>
    <td width="206"><span style="font-weight: 700; background-color: #FFFF00"><div id="v1">0</div></span></td>
    <td width="206"><span style="font-weight: 700; background-color: #FFFF00"><div id="v2">0</div></span></td>
    <td width="206"><span style="font-weight: 700; background-color: #FFFF00"><div id="v3">0</div></span></td>
    <td width="206"><span style="font-weight: 700; background-color: #FFFF00"><div id="v4">0</div></span></td>
    <td width="206"><span style="font-weight: 700; background-color: #FFFF00"><div id="v5">0</div></span></td>

  • #2
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    Well, first tip:

    using dot notation (or accessing members of an array) takes a little extra time. The more dots in a value, the slower it goes. So, one quick way to speed things up is store the longest and most commonly used elements in variables like so:

    var form = document.MainForm;

    form.A1.value ...
    form.A2.value ...

    etc.

    Next:

    Eval is slow. Avoid using it. Since your variables are assigned integer values, you don't need to do it everywhere, just when getting the value from the form. Only if you're getting improper math because they are being treated as strings do you need to cast.

    var A1 = parseInt(document.MainForm.A1.value);

    aa1 = A1 + A2 + A3+ A4 + A5;
    at1 = 100 - aa1;

    From a speed perspective, these are the two biggest things you can do.

    In terms of the amount of code you have here, you could be
    1) passing in parameters instead of creating 3 different functions
    2) using inline conditionals

    Code:
    function addit(letter, number)
    {
      var form = document.MainForm;
      var num1 = (form[letter+'1'].value > 0 ? parseInt(form[letter+'1'].value) : 0);
      var num2 = (form[letter+'2'].value > 0 ? parseInt(form[letter+'2'].value) : 0);
      var sum = 100 - num1 + num2; // *** go to 6 or whatever
      document.getElementById("v"+number).innerHTML = sum;
    }
    
    addit('A', '1'); // *** this is equivalent to your addit1

  • #3
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Here's another possiblity


    PHP Code:
    <HTML>
    <
    HEAD>
    <
    TITLE>Document Title</TITLE>


    <
    script type="text/javascript">

    function 
    addIt(c){

    myForm=document.MainForm

    temp
    =new Array()

    for(var 
    i=0;i<5;i++){
    temp[i] = (myForm[c+i].value>0?parseInt(myForm[c+i].value):0)
    }

    sum=0
    for(var i=0;i<temp.length;i++){
    sum+=temp[i]
    }

    total 100 sum
    document
    .getElementById("v"+c).innerHTML total
    }


    </script> 

    </HEAD>
    <BODY>

    <form name="MainForm">
    <input type="text" name="A0" value="1">
    <input type="text" name="A1" value="2">
    <input type="text" name="A2" value="3">
    <input type="text" name="A3" value="4">
    <input type="text" name="A4" value="5">
    <input type="Button" value="Calc" onclick="addIt('A')">
    <span style="font-weight: 700; background-color: #FFFF00"><div id="vA">0</div></span>


    <P><input type="text" name="B0" value="1">
    <input type="text" name="B1" value="2">
    <input type="text" name="B2" value="3">
    <input type="text" name="B3" value="4">
    <input type="text" name="B4" value="5">
    <input type="Button" value="Calc" onclick="addIt('B')">
    <span style="font-weight: 700; background-color: #FFFF00"><div id="vB">0</div></span>

    <P><input type="text" name="C0" value="1">
    <input type="text" name="C1" value="2">
    <input type="text" name="C2" value="3">
    <input type="text" name="C3" value="4">
    <input type="text" name="C4" value="5">
    <input type="Button" value="Calc" onclick="addIt('C')">
    <span style="font-weight: 700; background-color: #FFFF00"><div id="vC">0</div></span>

    <P><input type="text" name="D0" value="1">
    <input type="text" name="D1" value="2">
    <input type="text" name="D2" value="3">
    <input type="text" name="D3" value="4">
    <input type="text" name="D4" value="5">
    <input type="Button" value="Calc" onclick="addIt('D')">
    <span style="font-weight: 700; background-color: #FFFF00"><div id="vD">0</div></span>

    <P><input type="text" name="E0" value="1">
    <input type="text" name="E1" value="2">
    <input type="text" name="E2" value="3">
    <input type="text" name="E3" value="4">
    <input type="text" name="E4" value="5">
    <input type="Button" value="Calc" onclick="addIt('E')">
    <span style="font-weight: 700; background-color: #FFFF00"><div id="vE">0</div></span>
    </form>

    </BODY>
    </HTML> 
    Last edited by Mr J; 03-10-2006 at 08:31 PM.
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #4
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    The code above is a good example of using efficient code and small amounts of code.

    One improvement could be made in the for loop across "temp":

    sum=0
    for(var i=0;i<temp.length;i++){

    Should be:

    sum=0;
    tLength = temp.length;
    for(var i=0;i<tLength;i++){

    In the first, temp.length is calculated each time. In the second, it is calculated once.

    However, the full function as presented doesn't do what the OP's code did. The parameter 'c' appears to be used in place of the letters, 'A', 'B', 'C', etc in the for loop, but then is being used concatenated to 'v' at the end. In the OP's code, the character following 'v' was always a numeral, v1, v2, etc.

    That's why I did two parameters and not one.

  • #5
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    I dare to present a full dynamic DOM solution ( a number validate "extension" bonus included ) :
    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
    <
    html>
    <
    head>
    <
    title>Untitled Document</title>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <
    meta http-equiv="Content-Style-Type" content="text/css">
    <
    meta http-equiv="Content-Script-Type" content="text/javascript">
    <
    script type="text/javascript">
    function 
    calc(t){
    var 
    = /^[0-9]*$/;
    !
    r.test(t.value)?t.value t.value.replace(/[^0-9]/g,''):null;
    var 
    allC=t.parentNode.parentNode.getElementsByTagName('td');
    var 
    allT=t.parentNode.parentNode.getElementsByTagName('input');
    var 
    sum=0;
    for(var 
    i=allT.length-1;i>=0;i--){
    sum+=Number(allT[i].value);
    }
    allC[allC.length-1].firstChild.data=sum;
    }
    onload = function(){
    var 
    el document.getElementById('mytab').getElementsByTagName('input');
    for(var 
    i=el.length-1;i>=0;i--){
    el[i].onkeyup=function(){calc(this);}
    }
    }
    </script>
    </head>
    <body>
    <table id="mytab" width="200" border="0" cellspacing="1" cellpadding="1">
    <tr>
    <td><input type="text"></td>
    <td><input type="text"></td>
    <td><input type="text"></td>
    <td><input type="text"></td>
    <td><input type="text"></td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td><input type="text"></td>
    <td><input type="text"></td>
    <td><input type="text"></td>
    <td><input type="text"></td>
    <td><input type="text"></td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td><input type="text"></td>
    <td><input type="text"></td>
    <td><input type="text"></td>
    <td><input type="text"></td>
    <td><input type="text"></td>
    <td>&nbsp;</td>
    </tr>
    </table>

    </body>
    </html> 
    Last edited by Kor; 03-10-2006 at 10:14 PM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #6
    Senior Coder
    Join Date
    Feb 2006
    Location
    USA
    Posts
    1,013
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

  • #7
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by Kravvitz
    aaa, kmon, Kravvitz, at least you could tell us what should we suppose to learn on it?
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #8
    Senior Coder
    Join Date
    Feb 2006
    Location
    USA
    Posts
    1,013
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Kor, I don't see anything that would make your code be more optimized. I just thought I'd post that so havey could see what to avoid doing.
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

  • #9
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    aha... Well... when I encounter this kind of codes... Hm... There is no absolute way of coding for all the possible situations. Some time objects need to be isolated into a "container parent", some other time they are already in such of... There is no ultimate code for all the possibilies . Unfortunately ( or I should better say fortunately ) each particular problem has, most of the time, a particular solve. What I want to say is that, most of the cases, if thinking "dynamical", one may save a lot of time to get one's code on work.
    Kor, I don't see anything that would make your code be more optimized.
    Never say that. Always there might be small things which might do that. My code could be optimized as well. If not now, maybe tomorrow, or...)Anyway, the general ideea is to think in a "dynamic" way... "What if i need more cells? What if I need more tables/rows/inputs/select?..." and so on. Unfortunately, each javascript code should/must be unique for a simple reason... each web page is unique, so at least, tries to be so.
    Last edited by Kor; 03-10-2006 at 11:20 PM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

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