SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2007
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to display total score?

    Dear all,

    I need to create four textboxes: A, B, C, and T. Users will be asked to enter their points in A, B, and C so that the total equals 100, which is shown in T. I'm supposed to implement my site in a way that allows the users to enter the scores (points) in A, B, and C and watch the total shown in T. This way, the users will have the opportunity to adjust the points they give to A, B, and C based on their evaluation. How do I make the total in T appear as soon as someone enters a value in either A, B, or C ? Many thanks!

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If someone types in anything that is not a number, the fields value is automatically 0.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>Untitled Document</title>
            <link rel="stylesheet" type="text/css" media="screen" />
            <style type="text/css"></style>
            <script type="text/javascript">
                function updateScore(item) {
    
                    var a = document.getElementById('input_a');
                    var b = document.getElementById('input_b');
                    var c = document.getElementById('input_c');
                    var t = document.getElementById('input_t');
                    
                    var av = (isNaN(parseInt(a.value))?0:parseInt(a.value));
                    var bv = (isNaN(parseInt(b.value))?0:parseInt(b.value));
                    var cv = (isNaN(parseInt(c.value))?0:parseInt(c.value));
                    
                    t.value = av + bv + cv
                }
            </script>
        </head>
        <body>
            
            <label for="input_a">A: </label><input type="text" onblur="updateScore()" id="input_a" /><br />
            <label for="input_b">B: </label><input type="text" onblur="updateScore()" id="input_b" /><br />
            <label for="input_c">C: </label><input type="text" onblur="updateScore()" id="input_c" /><br />
            <label for="input_t">T: </label><input type="text" id="input_t" value="0" /><br />
    
        </body>
    </html>


  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2007
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi: thank you for the code!

    Are you sure this code is working since it's not working for me ?

    One thing I see here is that you specify the type of input_a, input_b, input_c, and input_t as "text". I converted them to "int" but things still didn't work. Also, textbox T does not accept any input from users. It just shows the total value of all the values entered in A, B, and C. Hope to hear from you soon. Thanks again.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2007
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It works now. Many thanks!

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2007
    Location
    Indonesia - Bali
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hey.., i have to try the code from gRoberts and.. there is no problem at all..
    but.. i was imagine i want to make more sensitif with the input value in the textfield. so, if u enter some numeric value in textfield A and textfield T will change its value live without waiting for focusing textfield B C or T and so on...

  6. #6
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Surely we're not here to give you exact answers to your questions, otherwise you wouldn't learn.



Bookmarks

Posting Permissions

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