KeyCode Automatically Calculate

**bvmail** · 04-30-2012, 01:20 PM

Hey everybody,
I am making an online scorekeeper for the game 5000. (You roll dice for points.) What the site does is it adds up he points and when you click calculate it adds all the textboxes. (CODE Below) I have the code set up how I like it, and it works, but I want to add something. When you click the enter key, it adds up all the textboxes without you having to click the button. I'm guessing it needs something with keycodes, but I don't quite understand that yet.

Sorry, the site won't allow me to post the code for it because its too long, so its here: http://briankvail.com/withtoggle.html

Thanks!

**JMRKER** · 05-01-2012, 02:28 PM

You seem to have a lot of redundant code.
If you use functions, you could cut the source code down quite a bit.

I don't really know what kind of game this is or how it is played,
so this is just a template of what you might want to do.

Code:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"> <!-- archaic format: language="JavaScript" -->
// From: http://www.webdeveloper.com/forum/showthread.php?t=260063

document.onkeyup= KeyCheck;
function KeyCheck(e) {
  var KeyID = (window.event) ? event.keyCode : e.keyCode;
  if ((KeyID == 13) || (KeyID == 9)) { // check for RETURN or TAB
    calculateAll();
    if (window.event) { event.keyCode = 9; return event.keyCode; }
                 else { e.keyCode = 9; return e.keyCode; }
  }
}

function calculateAll() {
  calculate('txtA');  calculate('txtB');  calculate('txtC');
  calculate('txtD');  calculate('txtE');
}
function calculate(ids) {
  var sum = 0;
  for (var i=1; i<26; i++) {
    sum += Number(document.getElementById(ids+i).value);
  }
  document.getElementById(ids+'26').value = sum;
}

function toggleID(ids) {
  var ele = document.getElementById("toggleText"+ids);
  var txt = document.getElementById("displayTxt"+ids);
  if(ele.style.display == "block") { ele.style.display = "none";    txt.innerHTML = "+5"; }
                              else { ele.style.display = "block";   txt.innerHTML = ""; }
} 
function formEntries(IDS,cntStart,cntEnd) {
  var str = '';  var tmp = '';
  for (var i=cntStart; i<=cntEnd; i++) {
    tmp = IDS+i;
    str += i+'. <INPUT TYPE="text" id="'+tmp+'" SIZE="5" value=""><br>';
  }
  return str;
}
</script> 

<!-- put link back in, if needed -->

<style type="text/css">
.player { width:160px; text-align:center; border:3px solid white; float:left; }
.moreTxt { display:none; border:0px; }
</style>

</head>
<body bgcolor="#3388CC">

<center><h1>5000 ScoreKeeper</h1></center><br>

<FORM NAME="myForm" action="" method="post" onsubmit="return false">

 <div class="player">
  <b>Player Name:<br><input id="player1Name" type="text" value=""></b><p>
  <div id="player1">
<script type="text/javascript"> document.write(formEntries('txtA',1,10)); </script>
   <a href="#" onclick="toggleID('1a');return false" id="displayTxt1a">+5</a><br>
   <div id="toggleText1a" class="moreTxt">
<script type="text/javascript"> document.write(formEntries('txtA',11,15)); </script>
    <a href="#" onclick="toggleID('1b');return false" id="displayTxt1b">+5</a><br>
   </div>
   <div id="toggleText1b" class="moreTxt">
<script type="text/javascript"> document.write(formEntries('txtA',16,20)); </script>
    <a href="#" onclick="toggleID('1c');return false" id="displayTxt1c">+5</a><br>
   </div>
   <div id="toggleText1c" class="moreTxt">
<script type="text/javascript"> document.write(formEntries('txtA',21,25)); </script>
   </div>
  </div>
  <br>Total: <INPUT TYPE="text" id="txtA26" SIZE="5" value="" readonly="readonly">
  <input type="button" VALUE="Calculate!" onClick="calculate('txtA')">
 </div>

 <div class="player">
  <b>Player Name:<br><input id="player2Name" type="text" value=""></b><p>
  <div id="player2">
<script type="text/javascript"> document.write(formEntries('txtB',1,10)); </script>
   <a href="#" onclick="toggleID('2a');return false" id="displayTxt2a">+5</a><br>
   <div id="toggleText2a" class="moreTxt">
<script type="text/javascript"> document.write(formEntries('txtB',11,15)); </script>
    <a href="#" onclick="toggleID('2b');return false" id="displayTxt2b">+5</a><br>
   </div>
   <div id="toggleText2b" class="moreTxt">
<script type="text/javascript"> document.write(formEntries('txtB',16,20)); </script>
    <a href="#" onclick="toggleID('2c');return false" id="displayTxt2c">+5</a><br>
   </div>
   <div id="toggleText2c" class="moreTxt">
<script type="text/javascript"> document.write(formEntries('txtB',21,25)); </script>
   </div>
  </div>
  <br>Total: <INPUT TYPE="text" id="txtB26" SIZE="5" value="" readonly="readonly">
  <input type="button" VALUE="Calculate!" onClick="calculate('txtB')">
 </div>

 <div class="player">
  <b>Player Name:<br><input id="player3Name" type="text" value=""></b><p>
  <div id="player3">
<script type="text/javascript"> document.write(formEntries('txtC',1,10)); </script>
   <a href="#" onclick="toggleID('3a');return false" id="displayTxt3a">+5</a><br>
   <div id="toggleText3a" class="moreTxt">
<script type="text/javascript"> document.write(formEntries('txtC',11,15)); </script>
    <a href="#" onclick="toggleID('3b');return false" id="displayTxt3b">+5</a><br>
   </div>
   <div id="toggleText3b" class="moreTxt">
<script type="text/javascript"> document.write(formEntries('txtC',16,20)); </script>
    <a href="#" onclick="toggleID('3c');return false" id="displayTxt3c">+5</a><br>
   </div>
   <div id="toggleText3c" class="moreTxt">
<script type="text/javascript"> document.write(formEntries('txtC',21,25)); </script>
   </div>
  </div>
  <br>Total: <INPUT TYPE="text" id="txtC26" SIZE="5" value="" readonly="readonly">
  <input type="button" VALUE="Calculate!" onClick="calculate('txtC')">
 </div>

 <div class="player">
  <b>Player Name:<br><input id="player4Name" type="text" value=""></b><p>
  <div id="player4">
<script type="text/javascript"> document.write(formEntries('txtD',1,10)); </script>
   <a href="#" onclick="toggleID('4a');return false" id="displayTxt4a">+5</a><br>
   <div id="toggleText4a" class="moreTxt">
<script type="text/javascript"> document.write(formEntries('txtD',11,15)); </script>
    <a href="#" onclick="toggleID('4b');return false" id="displayTxt4b">+5</a><br>
   </div>
   <div id="toggleText4b" class="moreTxt">
<script type="text/javascript"> document.write(formEntries('txtD',16,20)); </script>
    <a href="#" onclick="toggleID('4c');return false" id="displayTxt4c">+5</a><br>
   </div>
   <div id="toggleText4c" class="moreTxt">
<script type="text/javascript"> document.write(formEntries('txtD',21,25)); </script>
   </div>
  </div>
  <br>Total: <INPUT TYPE="text" id="txtD26" SIZE="5" value="" readonly="readonly">
  <input type="button" VALUE="Calculate!" onClick="calculate('txtD')">
 </div>

 <div class="player">
  <b>Player Name:<br><input id="player5Name" type="text" value=""></b><p>
  <div id="player5">
<script type="text/javascript"> document.write(formEntries('txtE',1,10)); </script>
   <a href="#" onclick="toggleID('5a');return false" id="displayTxt5a">+5</a><br>
   <div id="toggleText5a" class="moreTxt">
<script type="text/javascript"> document.write(formEntries('txtE',11,15)); </script>
    <a href="#" onclick="toggleID('5b');return false" id="displayTxt5b">+5</a><br>
   </div>
   <div id="toggleText5b" class="moreTxt">
<script type="text/javascript"> document.write(formEntries('txtE',16,20)); </script>
    <a href="#" onclick="toggleID('5c');return false" id="displayTxt5c">+5</a><br>
   </div>
   <div id="toggleText5c" class="moreTxt">
<script type="text/javascript"> document.write(formEntries('txtE',21,25)); </script>
   </div>
  </div>
  <br>Total: <INPUT TYPE="text" id="txtE26" SIZE="5" value="" readonly="readonly">
  <input type="button" VALUE="Calculate!" onClick="calculate('txtE')">
 </div>

 <br style="clear:both">
 <center><input type="reset" value="Clear All" /></center>
/></center>
</form>
</body>
</html>