www.webdeveloper.com
Results 1 to 4 of 4

Thread: KeyCode Automatically Calculate

  1. #1
    Join Date
    Apr 2011
    Posts
    6

    KeyCode Automatically Calculate

    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!

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,355

    Lightbulb

    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>

  3. #3
    Join Date
    Apr 2011
    Posts
    6
    wow thanks so much you helped me a ton

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,355

    Thumbs up

    Quote Originally Posted by bvmail View Post
    wow thanks so much you helped me a ton
    You're most welcome.
    Happy to help.

    Now, what is it supposed to do?

    Good Luck!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles