Adding Up Within A Form

[wright67uk]

How can I change the totalscore() function, so that it outputs the total outputs of the first three functions in my code?

 

<script language="javascript" type="text/javascript">  
function addroll(){  
 var r =  document.getElementById("roll_1").value * 1;  
     r += document.getElementById("roll_2").value * 1;  
     r += document.getElementById("roll_3").value * 1;  
 document.getElementById("roll_total").value = r;   
 return false;  // or true after testing
}  

function addchip(){  
 var c =  document.getElementById("chip_1").value * 1;  
     c += document.getElementById("chip_2").value * 1;  
     c += document.getElementById("chip_3").value * 1;  
 document.getElementById("chip_total").value = c;   
 return false;  // or true after testing
}  

function addpitch(){  
 var p =  document.getElementById("pitch_1").value * 1;  
     p += document.getElementById("pitch_2").value * 1;  
     p += document.getElementById("pitch_3").value * 1;  
 document.getElementById("pitch_total").value = p;   
 return false;  // or true after testing
}  

function totalscore(){  
 var T = r+c+p;
 document.getElementById("total_score").value = T;   
 return false;  // or true after testing
}  
</script>

[wright67uk]

heres the code i'm using;

 

<form>
<!-- ROLL -->
<input value="ROLL" type="text" class="heading" readonly style="border:0px"  />
<input onchange="addroll(this.form)" value=" " type="text" id="roll_1" autocomplete="off" />
<input onchange="addroll(this.form)" value=" " type="text" id="roll_2"  autocomplete="off" />
<input value=" " type="text" readonly style="border:0px" /><br/>

<input type="text" class="heading" readonly style="border:0px" />
<input onchange="addroll(this.form)" value=" " type="text" id="roll_3" autocomplete="off" />
<input onchange="totalscore(this.form)" onkeyup="totalscore(this.form);" value=" " type="text" name="roll_total" id="roll_total" class="subtotal" autocomplete="off" readonly="readonly" />
<input value="Roll Total" type="text" class="subheading" readonly style="border:0px" /><br/>

<!-- CHIP -->

<input value="CHIP" type="text" class="heading" readonly style="border:0px" />
<input onchange="addchip(this.form)" value=" " type="text" id="chip_1" autocomplete="off" />
<input onchange="addchip(this.form)" value=" " type="text" id="chip_2" autocomplete="off" />
<input value=" "    type="text" readonly style="border:0px" /><br/>

<input type="text" class="heading" readonly style="border:0px"/>
<input onchange="addchip(this.form)" value=" " type="text" id="chip_3" autocomplete="off" />
<input onchange="totalscore(this.form)" onkeyup="totalscore(this.form);" value=" " name="chip_total" type="text" id="chip_total" class="subtotal" autocomplete="off" readonly="readonly" />
<input value="Chip Total" type="text" class="subheading" readonly style="border:0px"/><br/>

<!-- PITCH  -->

<input value="PITCH" type="text" class="heading" readonly style="border:0px"/>
<input onchange="addpitch(this.form)" value=" " type="text" id="pitch_1" autocomplete="off" />
<input onchange="addpitch(this.form)" value=" " type="text" id="pitch_2" autocomplete="off" />
<input value=" " type="text" readonly style="border:0px" autocomplete="off" /><br/>

<input type="text" class="heading" readonly style="border:0px" />
<input onchange="addpitch(this.form)" value=" " type="text" id="pitch_3" autocomplete="off" />
<input onchange="totalscore(this.form)" value=" " name="pitch_total" type="text" id="pitch_total" class="subtotal" autocomplete="off" readonly="readonly" />
<input value="Pitch Total" type="text" class="subheading" readonly style="border:0px" /><br/>

<!-- TOTAL -->

<input               type="text" class="heading" readonly style="border:0px" />
<input value="TOTAL" type="text" class="total" readonly style="border:0px; margin-right:4px;"/>
<input value=" "     type="text" id="total_score" name="total_score" class="totalout"  readonly="readonly"/>
<input value=""    type="text" readonly style="border:0px" /><br/>

</form>

[cpd]

<script language="javascript" type="text/javascript">  
function sumItem(item){
 t = 0
 for(i = 1; i <= 3; i++) 
    t+= (document.getElementById(item+"_"+i).value * 1);
 document.getElementById(item+"_total").value = t;   
 return t;  // or true after testing
} 

function totalscore(){  
 var T = sumItem('chip') + sumItem('pitch') + sumItem('roll');
 document.getElementById("total_score").value = T;   
 return false;  // or true after testing
}  
</script>

 

Although I'd probably split up the value change from the actual summation as its more logical. There's probably an easier way to do it as well but I'm only thinking about your specific needs. What I've offered isn't particularly extensible either but never the less.