Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Senior Coder
    Join Date
    Apr 2010
    Posts
    1,454
    Thanks
    71
    Thanked 102 Times in 101 Posts

    Remaining number

    I want to be able to type numbers into 4 text boxes and it show the remaining number remaining.

    You'd get 10 points, you have 4 boxes like "muscle, balance, speed, intelligence".
    When you type like 3 into muscle, it shows 7 points remaining. If it's 0 left, it turns red and shows 0.
    If too many are used, it says like -2.

    I am thinking you have to use onFocus or onClick? So when you tab to another textbox it updates.

    Thanks
    Last edited by myfayt; 03-19-2014 at 12:35 AM.
    Been a sign maker for 7 years. My business:
    American Made Signs

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts
    So what have you attempted thus far?

  • #3
    Senior Coder
    Join Date
    Apr 2010
    Posts
    1,454
    Thanks
    71
    Thanked 102 Times in 101 Posts
    I code html, css, php and mysql, I don't have any JS experience. I'd really like to find a free script that I can copy and paste, don't need one custom built for me. Do you know of any? Thanks
    Been a sign maker for 7 years. My business:
    American Made Signs

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,375
    Thanks
    11
    Thanked 592 Times in 572 Posts
    this should get you going:

    Code:
    <html>
    
    Points Left <input id=left  type=number min=0 max=10 readonly value=10 /><br />
    muscle <input id=muscle type=number min=0 max=10 oninput=render() /><br />
    balance <input id=balance type=number min=0 max=10 oninput=render() /><br />
    speed <input id=speed type=number min=0 max=10 oninput=render() /><br />
    intel <input id=intel type=number min=0 max=10 oninput=render() />
    <script>
    
    function render(){
     var i=0;
    [
    	"muscle",
    	"balance",
    	"speed",
    	"intel"
    ].map(function(id){
      i+=Number(self[id].value);
      if( i > 10){ self[id].style.backgroundColor="red"; }else{ self[id].style.backgroundColor="green"; }
      
    });
     left.value=10-i;
    };
    
    
    
    </script>
    </html>
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • Users who have thanked rnd me for this post:

    myfayt (03-18-2014)

  • #5
    Senior Coder
    Join Date
    Apr 2010
    Posts
    1,454
    Thanks
    71
    Thanked 102 Times in 101 Posts
    Wow thank you, I didn't expect it fully built but I really appreciate it.
    Been a sign maker for 7 years. My business:
    American Made Signs


  •  

    Posting Permissions

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