View Full Version : optimizing script

03-09-2006, 09:25 PM
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;

//////// 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>

03-09-2006, 11:25 PM
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 ...



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

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

Mr J
03-10-2006, 08:26 PM
Here's another possiblity

<TITLE>Document Title</TITLE>

<script type="text/javascript">

function addIt(c){


temp=new Array()

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

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

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



<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>


03-10-2006, 09:04 PM
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":

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

Should be:

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.

03-10-2006, 10:00 PM
I dare to present a full dynamic DOM solution ( a number validate "extension" bonus included;) ) :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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 r = /^[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--){
onload = function(){
var el = document.getElementById('mytab').getElementsByTagName('input');
for(var i=el.length-1;i>=0;i--){
<table id="mytab" width="200" border="0" cellspacing="1" cellpadding="1">
<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><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><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>


03-10-2006, 10:29 PM
DHTML and JavaScript Performance Tuning (http://www.dhtmlkitchen.com/learn/js/perf/)

03-10-2006, 10:37 PM
DHTML and JavaScript Performance Tuning (http://www.dhtmlkitchen.com/learn/js/perf/)
aaa, kmon, Kravvitz, at least you could tell us what should we suppose to learn on it? :rolleyes:

03-10-2006, 10:41 PM
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.

03-10-2006, 11:12 PM
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 :cool: ) 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. :)