Stats App

cmb · October 31, 2011

So i have created a html5 java page for keeping soccer stats that works on my xoom offline, the problem is it runs really slow and it crashes often and i only have 1 person set up i was wondering if their was a way to make it faster and less buggy before i add the rest of the players please I don't know very much and all the help would be very muchly appreciated here is the code(i'm not including the show/hide code or the time code because I got them from tutorials on the web if they would help let me know and i will add them):

mane page

<!DOCTYPE html>
<html manifest="stats.appcache">
<head>
    <title>Stats</title>
<script type="text/javascript" src="../js/showhide.js"></script>
<script type="text/javascript" src="../js/timer.js"></script>
<script type="text/javascript" src="../js/localstoragefunctions.js"></script>
<script type="text/javascript" src="../js/playertime.js"></script>
<link href="../css/stats.css" rel="stylesheet" type="text/css">
</head>
<body onload='load();'>
   <table width="779">
    <tr>
    <td width="254" class="button">Score <input type="text" class="time" id="us" size="1" readonly value="0" />:<input type="text" class="time" id="them" size="1" readonly value="0" /></td>
  <td width="257"><input class="button" type="number" name="minutes" id="minutes" min="1" max="100" size="2" />
<input type="button" name="minutesbtn" id="minutesbtn" value="Chose" onClick="time()"  class="button" /></td>
<td width="110"><div class="button" id='timer'></div><div id='uptime'></div></td>
<td width="64"><a href="../pinkpanthers/pinkpanthers.php">Home</a> <a href="upload.php">Upload</a></td>
  </tr>
   </table>
   <table width="1005" border="1">
   <tr>
    <td width="82" height="85"><p class="button">Tyler</p></td>
    <td width="56"><form id="form1" name="form1" method="post" action="">
      <input type="checkbox" name="inout" id="inout" rel="in" onClick="ss()" class="checkbox"/>
      <label for="inout">In/Out</label>
    </form></td>
    <td width="845">
    <table border="0">
    <td width="56" style="background-color:#666666; border:#666666"  rel="in"><form id="form2" name="form2" method="post" action="">
      <input type="checkbox" name="golliey" id="golliey" rel="gollie" class="checkbox" />
      <label for="golliey">Golly</label>
    </form></td>
    <td width="118" style="background-color:#666666; border:#666666"  rel="gollie"><form id="form6" name="form6" method="post" action="">
      <input name="gsavebtn" type="button" id="gsavebtn" value="Saves" onClick="add_gsave()" class="button"/>
      <input name="gsave" type="text" id="gsave" value="0" size="2" readonly class="gol"/>
      </form></td><td width="120" style="background-color:#666666; border:#666666"  rel="gollie">
      <form id="form43">
      <input type="button" name="inbtn" id="inbtn" value="Let In" onClick="add_in()" class="button"/>
      <input name="in" type="text" id="in" value="0" size="2" readonly class="gol"/>
    </form></td>
    <td width="118"rel="in"><form id="form3" name="form3" method="post" action="">
      <input type="button" name="savesbtn" id="savesbtn" value="Saves" onClick="add_save()" class="button"/>
      <input name="save" type="text" id="save" value="0" size="2" readonly class="time"/>
    </form></td>
    <td width="113"rel="in"><form id="form4" name="form4" method="post" action="">
      <input type="button" name="goalbtn" id="goalbtn" value="Goals" onClick="add_goals()" class="button"/>
      <input name="goals" type="text" id="goals" value="0" size="2" readonly class="time"/>
    </form></td>
    <td width="134"rel="in"><form id="form5" name="form5" method="post" action="">
      <input type="button" name="assistbtn" id="assistbtn" value="Assists" onClick="add_assist() " class="button"/>
      <input name="assists" type="text" id="assists" value="0" size="2" readonly class="time"/>
    </form></td>
    <td width="317"><input type="text" class="time" id="disp"/></td>
  
   </table>
    </td>
    </tr>
   
   </table>
    </td>
    </tr>
    </table>
</body>
</html>
<script type="text/javascript">

function time(){
var minu = document.getElementById('minutes').value;
var minutes = minu * 60;
CreateTimer("timer", minutes);
//CreateTimer1("uptime", minutes);
}

////////////////////////////////////////////////////////////////////////////////
//FOR SCORE ARRAY
// 0 us 
//1 them
//FOR NAME ARRAYS
// 0 Gollie saves
// 1 Gollie letin
// 2 saves
// 3 goals
// 4 assists
// 5 time played

var val1 = localStorage.getItem('Tyler').split(',')[0];
document.getElementById('gsave').value = val1;

var val2 = localStorage.getItem('Tyler').split(',')[1];
document.getElementById('in').value = val2;

var val3 = localStorage.getItem('Tyler').split(',')[2];
document.getElementById('save').value = val3;

var val4 = localStorage.getItem('Tyler').split(',')[3];
document.getElementById('goals').value = val4;

var val5 = localStorage.getItem('Tyler').split(',')[4];
document.getElementById('assists').value = val5;

var val6 = localStorage.getItem('Score').split(',')[0];
document.getElementById('us').value = val6;

var val7 = localStorage.getItem('Score').split(',')[1];
document.getElementById('them').value = val7;
</script>

and here is the functions:

//FOR SCORE ARRAY
// 0 us 
//1 them
//FOR NAME ARRAYS
// 0 Gollie saves
// 1 Gollie letin
// 2 saves
// 3 goals
// 4 assists
// 5 time played

var tyler = [0, 0, 0, 0, 0, 0];
tyler[0] = localStorage.getItem('Tyler').split(',')[0];
tyler[1] = localStorage.getItem('Tyler').split(',')[1];
tyler[2] = localStorage.getItem('Tyler').split(',')[2];
tyler[3] = localStorage.getItem('Tyler').split(',')[3];
tyler[4] = localStorage.getItem('Tyler').split(',')[4];
tyler[5] = localStorage.getItem('Tyler').split(',')[5];
var score = [0, 0];
score[0] = localStorage.getItem('Score').split(',')[0];
score[1] = localStorage.getItem('Score').split(',')[1];


function add_gsave() {
var bm = document.getElementById('gsave').value;
var am = bm * 1 + 1;
tyler[0] = am;
localStorage.setItem("Tyler", tyler);
document.getElementById('gsave').value = am;
}

function add_in() {
var bm = document.getElementById('in').value;
var am = bm * 1 + 1;
tyler[1] = am;
localStorage.setItem( "Tyler", tyler )
document.getElementById('in').value = am;

var them = document.getElementById('them').value;
var addthem = them * 1 +1;
score[1] = addthem;
localStorage.setItem("Score", score);
document.getElementById('them').value = addthem;
}

function add_save() {
var bm = document.getElementById('save').value;
var am = bm * 1 + 1;
tyler[2] = am;
localStorage.setItem( "Tyler", tyler )
document.getElementById('save').value = am;
}

function add_goals() {
var bm = document.getElementById('goals').value;
var am = bm * 1 + 1;
tyler[3] = am;
localStorage.setItem( "Tyler", tyler )
document.getElementById('goals').value = am;

var us = document.getElementById('us').value;
var addus = us * 1 +1;
score[0] = addus;
localStorage.setItem("Score", score );
document.getElementById('us').value = addus;
}

function add_assist() {
var bm = document.getElementById('assists').value;
var am = bm * 1 + 1;
tyler[4] = am;
localStorage.setItem( "Tyler", tyler )
document.getElementById('assists').value = am;
}

Adam · November 1, 2011

You call 6 of the following statements, which is having to retrieve the "Tyler" data from the local database and split it on every call. You could just get the data once and split that.

tyler[0] = localStorage.getItem('Tyler').split(',')[0];
tyler[1] = localStorage.getItem('Tyler').split(',')[1];
// etc.

You would get the same result using *only* this:

var tyler = localStorage.getItem('Tyler').split(',');

------

Once you have that array defined though, you then ignore it at the end of the mark-up and set the element values with yet another 6 calls to the local database.

var val1 = localStorage.getItem('Tyler').split(',')[0];
document.getElementById('gsave').value = val1;

var val2 = localStorage.getItem('Tyler').split(',')[1];
document.getElementById('in').value = val2;

// etc.

All you need to do is refer to the existing tyler array variable here to get the values:

document.getElementById('gsave').value = tyler[0];
document.getElementById('in').value    = tyler[1];
// etc.

You also make the same repetitive calls for the score data. In total you're making 15 calls to the database when you only need 2.

Fixing those should speed things up (though to be honest I'm not entirely sure how much caching is done by the browser for local storage), but the main problem with you're code you'll see soon is that implementation is very static / single-purpose. You need to make it more dynamic / re-usable so that you can return a collection of users from the local database, as opposed to just a single one.

Sign In

Stats App

Recommended Posts

cmb

Link to comment

Share on other sites

Adam

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information