Jump to content

Stats App

cmb

By cmb
in Javascript Help

 Share

Recommended Posts

cmb Member

cmb

Posted
Posted

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

Link to comment
https://forums.phpfreaks.com/topic/250136-stats-app/
Share on other sites
Adam Advanced Member

Adam

Posted
Posted

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.

Link to comment
https://forums.phpfreaks.com/topic/250136-stats-app/#findComment-1283972
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.