html - Adding totals in javascript, syntax error -
im building exercise game based off of dragon ball z fun. page type in numbers , record progress.
live at: http://surrealmayhem.com/dbzgame/record_progress.html
now, ive got 99% of page working far. im trying accomplish take value in right-hand "totals" column , have add in long progress bar @ bottom of page.
each individual progress bar in totals column works. reason cant figure out progress bar @ bottom wont work. im still beginner suspect syntax.
i post entire code since must screwing somewhere.
<script> function balanceexp(){ var arr = document.getelementsbyname('balexp'); var tot=0; for(var z=0;z<arr.length;z++){ if(parseint(arr[z].value)) tot += parseint(arr[z].value); } document.getelementbyid('balancetotal').value = tot; } </script> <script> function powerexp(){ var arr = document.getelementsbyname('powexp'); var tot=0; for(var y=0;y<arr.length;y++){ if(parseint(arr[y].value)) tot += parseint(arr[y].value); } document.getelementbyid('powertotal').value = tot; } </script> > <script> function staminaexp(){ var arr = document.getelementsbyname('staexp'); var tot=0; for(var w=0;w<arr.length;w++){ if(parseint(arr[w].value)) tot += parseint(arr[w].value); } document.getelementbyid('staminatotal').value = tot; } </script> <script> function agilityexp(){ var arr = document.getelementsbyname('aglexp'); var tot=0; for(var o=0;o<arr.length;o++){ if(parseint(arr[o].value)) tot += parseint(arr[o].value); } document.getelementbyid('agilitytotal').value = tot; } </script> <script> function controlexp(){ var arr = document.getelementsbyname('conexp'); var tot=0; for(var s=0;s<arr.length;s++){ if(parseint(arr[s].value)) tot += parseint(arr[s].value); } document.getelementbyid('controltotal').value = tot; } </script> <script type="text/javascript"> function findtotal() { var names = ['balancetotal', 'powertotal', 'staminatotal', 'agilitytotal', 'controltotal']; var total = 0; (var = 0; < names.length; i++) { var value = document.getelementbyid(names[i]).value, x = parseint(value, 10) || 0; total += x; } document.getelementbyid('exp_total').value = total; } </script> </head> <body> <div class="wrapper"> <div class="column"></div> <div class="start"> <center><font size="5">"my progress" - <a href="index.html">home</a></font></center><br /><br /> sacred place. come @ beginning , end of every day track , record progress. in other words, story being written. <br /><br /> <div class="left"> <img src="pics/goku_badge.png" title="goku badge: completed 10,000 reps in 1 day"> <img src="pics/piccolodevilbadge.png" title="piccolo devil badge: defeated piccolo in battle."> <img src="pics/100repsall_badge.png" title="100 reps badge: completed 100 repititions of each exercise."> <img src="pics/100punches_badge.png" title="100 punches badge: completed 100 punches."> <img src="pics/1star_dragonball.png" title="you found 1 star dragon ball!"> </div> <div class="right"> <table border="0px" cellpadding="5px"> <tr><td colspan="4" bgcolor="#cccccc"> <center><b>totals:</b></center> </td></tr><tr><td colspan="4"></td></tr> <tr> <td bgcolor="#bbbbdd">balance:</td> <td bgcolor="#bbbbdd"><progress min="0" max="200000" value="balancetotal" id="balancetotal" style="width:190px;"></progress> </td></tr> <tr> <td><input onblur="balanceexp()" type="text" name="balexp" id="qty" style="width:30px;" onchange="findtotal()" > leg lifts</td> <td><input onblur="balanceexp()" type="text" name="balexp" id="qty" style="width:30px;" onchange="findtotal()" > crunches</td></tr> <td><input onblur="balanceexp()" type="text" name="balexp" id="qty" style="width:30px;" onchange="findtotal()" > rows</td> <td><input onblur="balanceexp()" type="text" name="balexp" id="qty" style="width:30px;" onchange="findtotal()" > lowerback extensions</td></tr> </tr> <tr> <td bgcolor="#ccddcc">power:</td> <td bgcolor="#ccddcc"><progress min="0" max="200000" value="powertotal" id="powertotal" style="width:190px;"></progress> </td></tr> <tr> <td><input onblur="powerexp()" type="text" name="powexp" id="qty" style="width:30px;" onchange="findtotal()" > push ups</td> <td><input onblur="powerexp()" type="text" name="powexp" id="qty" style="width:30px;" onchange="findtotal()" > sit ups</td></tr> <td><input onblur="powerexp()" type="text" name="powexp" id="qty" style="width:30px;" onchange="findtotal()" > pull ups</td> <td><input onblur="powerexp()" type="text" name="powexp" id="qty" style="width:30px;" onchange="findtotal()" > chin ups</td></tr> <td><input onblur="powerexp()" type="text" name="powexp" id="qty" style="width:30px;" onchange="findtotal()" > dips</td> <td><input onblur="powerexp()" type="text" name="powexp" id="qty" style="width:30px;" onchange="findtotal()" > squats</td></tr> <td><input onblur="powerexp()" type="text" name="powexp" id="qty" style="width:30px;" onchange="findtotal()" > flies</td> <td><input onblur="powerexp()" type="text" name="powexp" id="qty" style="width:30px;" onchange="findtotal()" > presses</td></tr> <td><input onblur="powerexp()" type="text" name="powexp" id="qty" style="width:30px;" onchange="findtotal()" > lifts</td> <td><input onblur="powerexp()" type="text" name="powexp" id="qty" style="width:30px;" onchange="findtotal()" > curls</td></tr> <tr> <td bgcolor="#ddddaa">control:</td> <td bgcolor="#ddddaa"><progress min="0" max="200000" value=" controltotal" id="controltotal" style="width:190px;"></progress> </td></tr> <tr> <td><input onblur="controlexp()" type="text" name="conexp" id="qty" style="width:30px;" onchange="findtotal()" > punches</td> <td><input onblur="controlexp()" type="text" name="conexp" id="qty" style="width:30px;" onchange="findtotal()" > vacuums</td></tr> <td><input onblur="controlexp()" type="text" name="conexp" id="qty" style="width:30px;" onchange="findtotal()" > kicks</td> <td><input onblur="controlexp()" type="text" name="conexp" id="qty" style="width:30px;" onchange="findtotal()" > forearms work</td></tr> <tr> <td bgcolor="#cca9a9">stamina:</td> <td bgcolor="#cca9a9"><progress min="0" max="200000" value=" staminatotal" id="staminatotal" style="width:190px;"></progress> </td></tr> <tr> <td><input onblur="staminaexp()" type="text" name="staexp" id="qty" style="width:30px;;" onchange="findtotal()" > planks</td> <td><input onblur="staminaexp()" type="text" name="staexp" id="qty" style="width:30px;;" onchange="findtotal()" > burpees</td></tr> <td><input onblur="staminaexp()" type="text" name="staexp" id="qty" style="width:30px;;" onchange="findtotal()" > hangs</td> <td><input onblur="staminaexp()" type="text" name="staexp" id="qty" style="width:30px;;" onchange="findtotal()" > wall sits</td></tr> <tr> <td bgcolor="#aaccdd">agility:</td> <td bgcolor="#aaccdd"><progress min="0" max="200000" value="agilitytotal" id="agilitytotal" style="width:190px;"></progress> </td></tr> <tr> <td><input onblur="agilityexp()" type="text" name="aglexp" id="qty" style="width:30px;" onchange="findtotal()" > walk / run</td> <td><input onblur="agilityexp()" type="text" name="aglexp" id="qty" style="width:30px;" onchange="findtotal()" > jumping jacks</td></tr> <td><input onblur="agilityexp()" type="text" name="aglexp" id="qty" style="width:30px;" onchange="findtotal()" > lunges</td> <td><input onblur="agilityexp()" type="text" name="aglexp" id="qty" style="width:30px;" onchange="findtotal()" > box jumps</td></tr> </table> <br /> <input type="button" value="print" name="printbutton" onclick="window.print();"> </div> <center> total experience: <br /> <!-- <input type="text" name="total" id="total"/> / 1,000,000 pts --> <progress min="0" max="1000000" value="exp_total" id="exp_total" style="width:800px;"></progress> </center> </div> </center> </div> <div class="column"></div> i have previous script wrote takes numbers , totals them works, , tried adapt progress bar, didnt work either. ill post here, thought might simpler solution. dont understand loops yet , script better, dont know how adapt progress bar. dont know if of use thought id post both.
<script> function findtotal(){ var bal_t = parseint(document.getelementbyid("balancetotal").value); var pow_t = parseint(document.getelementbyid("poweretotal").value); var con_t = parseint(document.getelementbyid("controltotal").value); var agl_t = parseint(document.getelementbyid("agilitytotal").value); var sta_t = parseint(document.getelementbyid("staminatotal").value); var total_exp = document.getelementbyid("total"); total_exp.value = bal_t + pow_t + con_t + agl_t + sta_t; </script>
one problem allexp.length evaluates undefined in line:
for (var = 0; < allexp.length; i++) { you're assuming length attribute of allexp, though array. however, defined allexp addition or concatenation:
var allexp = (balancetotal + powertotal + staminatotal + agilitytotal + controltotal); to make array of strings, instead:
var names = ['balancetotal', 'powertotal', 'staminatotal', 'agilitytotal', 'controltotal']; another problem you're treating strings though had value attributes. each string id of html element. therefore, should element using getelementbyid , value.
for (var = 0; < names.length; i++) { var value = document.getelementbyid(names[i]).value, // value element. x = parseint(value, 10) || 0; // parse in base 10. default 0. tot += x; } a final problem aren't calling findtotal() anywhere. when want run? if want run after balance total has been updated, example, should insert call findtotal() last line of balanceexp() function definition.
to summarize, replace current findtotal() function this:
function findtotal() { var names = ['balancetotal', 'powertotal', 'staminatotal', 'agilitytotal', 'controltotal']; var total = 0; (var = 0; < names.length; i++) { var value = document.getelementbyid(names[i]).value, x = parseint(value, 10) || 0; total += x; } document.getelementbyid('total').value = total; } and make sure call findtotal() when want run.
below live demonstration incorporating changes have described. try out, click on "run code snippet" button , on "full page" button shows inside box.
function findtotal() { var names = ['balancetotal', 'powertotal', 'staminatotal', 'agilitytotal', 'controltotal']; var total = 0; (var = 0; < names.length; i++) { var value = document.getelementbyid(names[i]).value, x = parseint(value, 10) || 0; total += x; } document.getelementbyid('total').value = total; } function balanceexp(){ var arr = document.getelementsbyname('balexp'); var tot=0; for(var z=0;z<arr.length;z++){ if(parseint(arr[z].value)) tot += parseint(arr[z].value); } document.getelementbyid('balancetotal').value = tot; findtotal(); } function powerexp(){ var arr = document.getelementsbyname('powexp'); var tot=0; for(var y=0;y<arr.length;y++){ if(parseint(arr[y].value)) tot += parseint(arr[y].value); } document.getelementbyid('powertotal').value = tot; findtotal(); } function staminaexp(){ var arr = document.getelementsbyname('staexp'); var tot=0; for(var w=0;w<arr.length;w++){ if(parseint(arr[w].value)) tot += parseint(arr[w].value); } document.getelementbyid('staminatotal').value = tot; findtotal(); } function agilityexp(){ var arr = document.getelementsbyname('aglexp'); var tot=0; for(var o=0;o<arr.length;o++){ if(parseint(arr[o].value)) tot += parseint(arr[o].value); } document.getelementbyid('agilitytotal').value = tot; findtotal(); } function controlexp(){ var arr = document.getelementsbyname('conexp'); var tot=0; for(var s=0;s<arr.length;s++){ if(parseint(arr[s].value)) tot += parseint(arr[s].value); } document.getelementbyid('controltotal').value = tot; findtotal(); }body{ background-color: orange; margin: 0px;} .wrapper{ height: auto; width: 1260px; margin: auto; background-color: transparent;} .start{ height: 800px; width: 800px; background-color: white; margin: 35px 20px 10px 20px; padding: 25px; border: solid 10px #000000; clear: none; float: left;} .left{ height: 610px; width: 348px; background-color: transparent; clear: none; float: left; margin-right: 20px; border: solid 1px #cccccc; padding: 20px; overflow-y: scroll; overflow-x: hidden;} .right{ height: 610px; width: 348px; background-color: transparent; clear: none; float: left; margin-bottom: 8px; border: solid 1px #cccccc; padding: 20px; overflow-y: scroll; overflow-x: hidden;} .column{ height: 1000px; width: 165px; background-image: url(pics/column.png); background-color: transparent; clear: none; float: left; overflow: hidden;}<div class="wrapper"> <div class="column"></div> <div class="start"> <center><font size="5">"my progress" - <a href="index.html">home</a></font></center><br /><br /> sacred place. come @ beginning , end of every day track , record progress. in other words, story being written. <br /><br /> <div class="left"> <img src="pics/goku_badge.png" title="goku badge: completed 10,000 reps in 1 day"> <img src="pics/piccolodevilbadge.png" title="piccolo devil badge: defeated piccolo in battle."> <img src="pics/100repsall_badge.png" title="100 reps badge: completed 100 repititions of each exercise."> <img src="pics/100punches_badge.png" title="100 punches badge: completed 100 punches."> <img src="pics/1star_dragonball.png" title="you found 1 star dragon ball!"> </div> <div class="right"> <table border="0px" cellpadding="5px"> <tr><td colspan="4" bgcolor="#cccccc"> <center><b>totals:</b></center> </td></tr><tr><td colspan="4"></td></tr> <tr> <td bgcolor="#bbbbdd">balance:</td> <td bgcolor="#bbbbdd"><progress min="0" max="200000" value="balancetotal" id="balancetotal" style="width:190px;"></progress> </td></tr> <tr> <td><input onblur="balanceexp()" type="text" name="balexp" id="qty" style="width:30px;"> leg lifts</td> <td><input onblur="balanceexp()" type="text" name="balexp" id="qty" style="width:30px;"> crunches</td></tr> <td><input onblur="balanceexp()" type="text" name="balexp" id="qty" style="width:30px;"> rows</td> <td><input onblur="balanceexp()" type="text" name="balexp" id="qty" style="width:30px;"> lowerback extensions</td></tr> </tr> <tr> <td bgcolor="#ccddcc">power:</td> <td bgcolor="#ccddcc"><progress min="0" max="200000" value="powertotal" id="powertotal" style="width:190px;"></progress> </td></tr> <tr> <td><input onblur="powerexp()" type="text" name="powexp" id="qty" style="width:30px;"> push ups</td> <td><input onblur="powerexp()" type="text" name="powexp" id="qty" style="width:30px;"> sit ups</td></tr> <td><input onblur="powerexp()" type="text" name="powexp" id="qty" style="width:30px;"> pull ups</td> <td><input onblur="powerexp()" type="text" name="powexp" id="qty" style="width:30px;"> chin ups</td></tr> <td><input onblur="powerexp()" type="text" name="powexp" id="qty" style="width:30px;"> dips</td> <td><input onblur="powerexp()" type="text" name="powexp" id="qty" style="width:30px;"> squats</td></tr> <td><input onblur="powerexp()" type="text" name="powexp" id="qty" style="width:30px;"> flies</td> <td><input onblur="powerexp()" type="text" name="powexp" id="qty" style="width:30px;"> presses</td></tr> <td><input onblur="powerexp()" type="text" name="powexp" id="qty" style="width:30px;"> lifts</td> <td><input onblur="powerexp()" type="text" name="powexp" id="qty" style="width:30px;"> curls</td></tr> <tr> <td bgcolor="#ddddaa">control:</td> <td bgcolor="#ddddaa"><progress min="0" max="200000" value=" controltotal" id="controltotal" style="width:190px;"></progress> </td></tr> <tr> <td><input onblur="controlexp()" type="text" name="conexp" id="qty" style="width:30px;"> punches</td> <td><input onblur="controlexp()" type="text" name="conexp" id="qty" style="width:30px;"> vacuums</td></tr> <td><input onblur="controlexp()" type="text" name="conexp" id="qty" style="width:30px;"> kicks</td> <td><input onblur="controlexp()" type="text" name="conexp" id="qty" style="width:30px;"> forearm squeeze</td></tr> <tr> <td bgcolor="#cca9a9">stamina:</td> <td bgcolor="#cca9a9"><progress min="0" max="200000" value=" staminatotal" id="staminatotal" style="width:190px;"></progress> </td></tr> <tr> <td><input onblur="staminaexp()" type="text" name="staexp" id="qty" style="width:30px;;"> planks</td> <td><input onblur="staminaexp()" type="text" name="staexp" id="qty" style="width:30px;;"> burpees</td></tr> <td><input onblur="staminaexp()" type="text" name="staexp" id="qty" style="width:30px;;"> hangs</td> <td><input onblur="staminaexp()" type="text" name="staexp" id="qty" style="width:30px;;"> wall sits</td></tr> <tr> <td bgcolor="#aaccdd">agility:</td> <td bgcolor="#aaccdd"><progress min="0" max="200000" value="agilitytotal" id="agilitytotal" style="width:190px;"></progress> </td></tr> <tr> <td><input onblur="agilityexp()" type="text" name="aglexp" id="qty" style="width:30px;"> walk / run</td> <td><input onblur="agilityexp()" type="text" name="aglexp" id="qty" style="width:30px;"> jumping jacks</td></tr> <td><input onblur="agilityexp()" type="text" name="aglexp" id="qty" style="width:30px;"> lunges</td> <td><input onblur="agilityexp()" type="text" name="aglexp" id="qty" style="width:30px;"> box jumps</td></tr> </table> <br /> <input type="button" value="print" name="printbutton" onclick="window.print();"> </div> <center> total experience: <br /> <!-- <input type="text" name="total" id="total"/> / 1,000,000 pts --> <progress min="0" max="1000000" value="total" id="total" style="width:800px;"></progress> </center> </div> </center> </div> <div class="column"></div>
Comments
Post a Comment