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.
Page 1 of 3 123 LastLast
Results 1 to 15 of 34
  1. #1
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Help with tally script

    Hello,

    I am trying to do up a script for my mum so I can turn it into an app for her android. This app would allow her to keep track of my chores around the house and the value of each chore (also the chores I don't do (subtracting).

    It tallys the jobs I do with a money amount. The code below is one I have borrowed and done some editing on, but I am stuck now.

    It adds up to give a total which is nice, but I would also like a number tally next to the chore. For example with dishes there should be a box next to dishes that gives the number of times I have done the dishes, which would increase every time the dishes are done.

    I really hope someone can help with me with this.


    <html>
    <head>
    <script type="text/javascript">
    function bump(jobs)
    {
    var total = jobs.form["total" + jobs.name];
    total.value = parseInt(total.value) + parseInt(jobs.value);
    jobs.checked = false;
    }
    </script>
    </head>
    <body>
    <form>
    <br/>
    <label><input name="jobs1" type="button" value="50"onclick="bump(this);""/> dishes </label>&nbsp;&nbsp;<label><input name="jobs1" type="button" value="-50" onclick="bump(this);"/> Delete dishes </label><br/>
    <label><input name="jobs1" type="button" value="25" onclick="bump(this);"/> clothes in</label><label>&nbsp;<input name="jobs1" type="button" value="-25" onclick="bump(this);"/> Delete clothes in</label><br/><br/>

    <label> Total: <input type="text" readonly name="totaljobs1" value="0" />

    </form>
    </body>
    </html>

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,151
    Thanks
    203
    Thanked 2,548 Times in 2,526 Posts
    If you want to store data from one page visit to another (such as the total number of times you have washed the dishes) you will need to use a cookie or local storage.

    BTW, when posting here please help us to help you by making it easier to copy, test and debug your scripts by following the posting guidelines and wrapping your code in CODE tags. This means use the octothorpe or # button on the toolbar. You can (and should) edit your previous post.


    It's unthinkable that racing might not go ahead today because of the weather. Although obviously it might not. - bv Racing commentator, BBC Radio 3.
    Last edited by Philip M; 04-24-2013 at 08:05 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts
    HI,

    sorry about that.

    I can't find any edit button

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,151
    Thanks
    203
    Thanked 2,548 Times in 2,526 Posts
    Quote Originally Posted by chads View Post
    HI,

    sorry about that.

    I can't find any edit button
    Ah, that is because as a new member you are not allowed to edit your posts. So my suggestion re code tags cannot be carried out.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #5
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,106
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    I'm going out on a limb here and assuming this is not a homework assignment!

    Code:
    <html>
    <head>
    <title> Tally Chores </title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=yes"/>
    
    <style type="text/css">
    @media screen { body { font-size: 16px } }
    @media screen, print { body { line-height: 1.2 } }
    
     div { width:200px; float:left; }
     p { clear:both; }
    </style>
    <!-- Modified for: http://www.codingforums.com/showthread.php?p=1331197#post1331197 -->
    
    </head>
    <body>
    <form id="myform" action="" method="post" onsubmit="return false">
    <h2>Chore Tally</h2>
    <div>$1.00 <button value="1.00" onclick="bump(this.value)"> rake leaves/bag </button> </div>
    <div><button value="-1.00" onclick="bump(this.value)"> forgot to rake </button> </div>
    <p>&nbsp;</p>
    <div>$0.75 <button value="0.75" onclick="bump(this.value)"> garbage out </button> </div>
    <div><button value="-0.75" onclick="bump(this.value)"> forgot garbage</button> </div>
    <p>&nbsp;</p>
    <div>$0.50 <button value="0.50" onclick="bump(this.value)"> washed dishes </button> </div>
    <div><button value="-0.50" onclick="bump(this.value)"> forgot dishes </button> </div>
    <p>&nbsp;</p>
    <div>$0.25 <button value="0.25" onclick="bump(this.value)"> washed clothes </button> </div>
    <div><button value="-0.25" onclick="bump(this.value)"> forgot clothes </button> </div>
    <p>&nbsp</p>
    <div>$0.05 <button value="0.05" onclick="bump(this.value)"> Said please/thank you </button> </div>
    <div><button value="-0.05" onclick="bump(this.value)"> forgot please/thank you </button> </div>
    <p>&nbsp</p>
    Total: $<input type="text" readonly id="totaljobs" value="0" />
    
    <script type="text/javascript">
      function bump(jobs) {
        var total = Number(document.getElementById('totaljobs').value);
        total += Number(jobs);
        document.getElementById('totaljobs').value = total.toFixed(2);
        persistTally();
      }
    
    /* * Indicate if this browser supports local storage.  */
      function html5StorageSupported() {
         return ('localStorage' in window) && window['localStorage'] !== null;
      }
    
    /* * Provide indication on web page of whether this browser supports local storage.  */
      function initializeTally() {
        if ( html5StorageSupported() ) {
          if (localStorage['tally.total'] == 'undefined') { persistTally(); } else { loadTally(); } 
        } else { alert('Local storage is not supported'); }
      }
    
    /* * Save tally total to local storage.  */
      function persistTally() {
         if (html5StorageSupported()) { 
           var tally = document.getElementById("totaljobs").value;
           var storageIndex = "tally.total";
           localStorage[storageIndex] = tally;
         } else { alert("Cannot save to local storage because it's not supported."); }
      }
    
    /* * Load tally total from local storage.  */
      function loadTally() {
         if (html5StorageSupported()) {
           document.getElementById('totaljobs').value = localStorage["tally.total"];
         } else { alert("Cannot load from local storage because it's not supported."); }
      }
    
    window.onload = function() { initializeTally(); }
    
    </script>
    </form>
    </body>
    </html>
    Last edited by jmrker; 04-25-2013 at 04:22 AM.

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,151
    Thanks
    203
    Thanked 2,548 Times in 2,526 Posts
    jmrker's script does not work - it returns NaN because
    <div>$1.00 <button value="1.00" onclick="bump(this.value)"> rake leaves/bag </button> </div>
    returns "rake leaves", not 1.00

    I think you need to specify<!DOCTYPE html>
    or use <input type = "button"

    But I cannot get the local storage to work - in any case it will not work in IE when run locally (not on line).

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #7
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,106
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    Quote Originally Posted by Philip M View Post
    jmrker's script does not work - it returns NaN because
    <div>$1.00 <button value="1.00" onclick="bump(this.value)"> rake leaves/bag </button> </div>
    returns "rake leaves", not 1.00

    I think you need to specify<!DOCTYPE html>
    or use <input type = "button"

    But I cannot get the local storage to work - in any case it will not work in IE when run locally (not on line).
    It works fine on my computers.
    My localstorage tests are not being done from a server at this time, but in the past they work well also.
    I'm using an older version of Safari on the iMac and FF on a PC.
    I do not currently have access to MSIE. Will need to test in evening.

    I believe the mistake I made was in checking for the localstorage value == 'undefined', instead of just undefined.
    Anyway, made an additional button to clear total if it still shows NaN in display.
    Let me know if you still have an error with the 'rake leaves' button adding to the tally total.

    Whoops, forgot changed code ...
    Code:
    <html>
    <head>
    <title> Tally Chores </title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=yes"/>
    
    <style type="text/css">
    @media screen { body { font-size: 16px } }
    @media screen, print { body { line-height: 1.2 } }
    
     div { width:200px; float:left; }
     p { clear:both; }
    </style>
    <!-- Modified for: http://www.codingforums.com/showthread.php?p=1331197#post1331197 -->
    
    </head>
    <body>
    <form id="myform" action="" method="post" onsubmit="return false">
    <h2>Chore Tally</h2>
    <div>$1.00 <button value="1.00" onclick="bump(this.value)"> rake leaves/bag </button> </div>
    <div><button value="-1.00" onclick="bump(this.value)"> forgot to rake </button> </div>
    <p>&nbsp;</p>
    <div>$0.75 <button value="0.75" onclick="bump(this.value)"> garbage out </button> </div>
    <div><button value="-0.75" onclick="bump(this.value)"> forgot garbage</button> </div>
    <p>&nbsp;</p>
    <div>$0.50 <button value="0.50" onclick="bump(this.value)"> washed dishes </button> </div>
    <div><button value="-0.50" onclick="bump(this.value)"> forgot dishes </button> </div>
    <p>&nbsp;</p>
    <div>$0.25 <button value="0.25" onclick="bump(this.value)"> washed clothes </button> </div>
    <div><button value="-0.25" onclick="bump(this.value)"> forgot clothes </button> </div>
    <p>&nbsp</p>
    <div>$0.05 <button value="0.05" onclick="bump(this.value)"> Said please/thank you </button> </div>
    <div><button value="-0.05" onclick="bump(this.value)"> forgot please/thank you </button> </div>
    <p>&nbsp</p>
    Total: $<input type="text" readonly id="totaljobs" value="0" />
    <button onclick="clearTally()">Clear</button>
    
    <script type="text/javascript">
      function bump(jobs) {
        var total = Number(document.getElementById('totaljobs').value);
        total += Number(jobs);
        document.getElementById('totaljobs').value = total.toFixed(2);
        persistTally();
      }
      function clearTally() {
        document.getElementById('totaljobs').value = '0.00';
        persistTally();
      }
    
    /* * Indicate if this browser supports local storage.  */
      function html5StorageSupported() {
         return ('localStorage' in window) && window['localStorage'] !== null;
      }
    
    /* * Provide indication on web page of whether this browser supports local storage.  */
      function initializeTally() {
        if ( html5StorageSupported() ) {
          if (localStorage['tally.total'] == undefined) { clearTally(); } else { loadTally(); }   // altered original code here
        } else { alert('Local storage is not supported'); }
      }
    
    /* * Save tally total to local storage.  */
      function persistTally() {
         if (html5StorageSupported()) { 
           var tally = document.getElementById("totaljobs").value;
           var storageIndex = "tally.total";
           localStorage[storageIndex] = tally;
         } else { alert("Cannot save to local storage because it's not supported."); }
      }
    
    /* * Load tally total from local storage.  */
      function loadTally() {
         if (html5StorageSupported()) {
           document.getElementById('totaljobs').value = localStorage["tally.total"];
         } else { alert("Cannot load from local storage because it's not supported."); }
      }
    
    window.onload = function() { initializeTally(); }
    
    </script>
    </form>
    </body>
    </html>
    Last edited by jmrker; 04-26-2013 at 06:38 PM.

  • #8
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,401
    Thanks
    11
    Thanked 595 Times in 575 Posts
    Quote Originally Posted by Philip M View Post
    jmrker's script does not work - it returns NaN because
    <div>$1.00 <button value="1.00" onclick="bump(this.value)"> rake leaves/bag </button> </div>
    returns "rake leaves", not 1.00
    sure about that?

    and, IE blocks localStrorage on file:/// - based pages

    the first run, persistTally() executes and saves the empty field : "if (localStorage['tally.total'] == undefined) { persistTally(); } "
    Last edited by rnd me; 04-25-2013 at 09:55 PM.
    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%

  • #9
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,106
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Exclamation

    Quote Originally Posted by rnd me View Post
    sure about that?

    and, IE blocks localStrorage on file:/// - based pages

    the first run, persistTally() executes and saves the empty field : "if (localStorage['tally.total'] == undefined) { persistTally(); } "
    Alter to:
    Code:
      function initializeTally() {
        if ( html5StorageSupported() ) {
          if (localStorage['tally.total'] == undefined) { clearTally(); } else { loadTally(); } 
        } else { alert('Local storage is not supported'); }
      }
    I guess I'll defer to your observation, as I try to avoid MSIE as much as possible.
    I don't like the way they like to define their own rules.

    I was going by this table from: https://developer.mozilla.org/en-US/docs/DOM/Storage
    Where I was reading that "localstorage" was allowed (???)
    Code:
    Browser compatibility
    
        Desktop
    
    Feature         Chrome        Firefox (Gecko)         Internet Explorer         Opera         Safari (WebKit)
    localStorage       4          3.5           8         10.50                   4
    sessionStorage     5           2           8          10.50                   4
    globalStorage   Not supported     2-13                Not supported        Not supported        Not supported
    You are obviously right as I tried it using MSIE V10.0 and I get the annoying (to paraphrase),
    "...Is it OK to run on your own computer since you might be too dumb to know you started the program yourself..." message.

    Since it is such a small storage amount, is your suggestion to recode it to use cookies instead of localstorage commands?

    Also, where do you find your information about not being able to use in MSIE on local file:/// ???
    Last edited by jmrker; 04-26-2013 at 02:06 AM.

  • #10
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,151
    Thanks
    203
    Thanked 2,548 Times in 2,526 Posts
    Quote Originally Posted by jmrker View Post
    Since it is such a small storage amount, is your suggestion to recode it to use cookies instead of localstorage commands?

    Also, where do you find your information about not being able to use in MSIE on local file:/// ???
    Personally I would use a cookie. I know that local storage is fashionable, but at least cookies work in all browsers. I do not really see any reason to use local storage unless the amount of data to be stored is large. Another weakness of local storage is that it doesn’t work cross-browser. In other words, data written to local storage by a page running in Firefox can’t be read by the same page running in Chrome, and vice versa. This could be a significant defect.


    To answer your question:-

    In IE localStorage is only available on HTTP websites.

    http://stackoverflow.com/questions/8...rom-the-file-s
    http://www.codingforums.com/showthread.php?t=251374
    Last edited by Philip M; 04-26-2013 at 07:50 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #11
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,151
    Thanks
    203
    Thanked 2,548 Times in 2,526 Posts
    Quote Originally Posted by rnd me View Post
    sure about that?

    and, IE blocks localStrorage on file:/// - based pages

    the first run, persistTally() executes and saves the empty field : "if (localStorage['tally.total'] == undefined) { persistTally(); } "
    Yes, I am quite sure.

    <div>$1.00 <button value="1.00" onclick="bump(this.value)"> rake leaves/bag </button> </div>

    <script type="text/javascript">
    function bump(jobs) {
    alert (jobs); // rake leaves


    In IE9 local storage is supported but does not work from a local file (see previous post).
    Last edited by Philip M; 04-26-2013 at 07:39 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #12
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,106
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Question

    Quote Originally Posted by Philip M View Post
    ...
    Code:
    <div>$1.00 <button value="1.00" onclick="bump(this.value)"> rake leaves/bag </button> </div>
    
    <script type="text/javascript">
      function bump(jobs) {
    alert (jobs);  // rake leaves
    ...
    Try as I may, I am unable to replicate your assessment of the above code.
    I see displayed either '1.00' or '-1.00'.

    Under what conditions do you get the 'rake leaves' response?

  • #13
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,401
    Thanks
    11
    Thanked 595 Times in 575 Posts
    Quote Originally Posted by Philip M View Post
    Personally I would use a cookie. I know that local storage is fashionable, but at least cookies work in all browsers. I do not really see any reason to use local storage unless the amount of data to be stored is large. Another weakness of local storage is that it doesn’t work cross-browser. In other words, data written to local storage by a page running in Firefox can’t be read by the same page running in Chrome, and vice versa. This could be a significant defect.
    localStorage works in all browser since IE8, no compat concerns there. The file:// mode in IE, which js is not really meant for, is the only "exception" i know of. Many Many people block cookies using an add-on, and IE7 is < 1%, so it would not suprise me if localStorage is actually more reliable than cookies in the real world. A good litmus? Advertisers use it.


    I don't get the point about cookies: IE won't read chrome's cookies any better than it would its localStorage, no disadvantage there.
    considering the performance hits that cookies bestow, i avoid them by any means i can.
    Last edited by rnd me; 04-26-2013 at 04:38 PM.
    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%

  • #14
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,151
    Thanks
    203
    Thanked 2,548 Times in 2,526 Posts
    Quote Originally Posted by jmrker View Post
    Try as I may, I am unable to replicate your assessment of the above code.
    I see displayed either '1.00' or '-1.00'.

    Under what conditions do you get the 'rake leaves' response?
    As I say, in IE9. Just with alert(jobs).

    <div>$1.00 <button value="1.00" onclick="bump(this.value)"> rake leaves/bag </button> </div>

    //...........

    <script type="text/javascript">
    function bump(jobs) {
    alert (jobs); // rake leaves

    I am also confused!!

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #15
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,401
    Thanks
    11
    Thanked 595 Times in 575 Posts
    Quote Originally Posted by Philip M View Post
    jmrker's script does not work - it returns NaN because
    <div>$1.00 <button value="1.00" onclick="bump(this.value)"> rake leaves/bag </button> </div>
    returns "rake leaves", not 1.00

    Quote Originally Posted by Philip M View Post
    Yes, I am quite sure.

    <div>$1.00 <button value="1.00" onclick="bump(this.value)"> rake leaves/bag </button> </div>

    <script type="text/javascript">
    function bump(jobs) {
    alert (jobs); // rake leaves
    i wouldn't be so sure if i were you. please check again, click run then the "rake leaves" button.

    i won't rub it in, but you should check these sort of things before posting, especially if i offer an easy out...
    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%


  •  
    Page 1 of 3 123 LastLast

    Posting Permissions

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