www.webdeveloper.com
Results 1 to 8 of 8

Thread: Saldo between two numbers, and money format

  1. #1
    Join Date
    Feb 2014
    Posts
    9

    Saldo between two numbers, and money format

    Hello,

    i'm new here, but i see that members love to help

    I have this code:
    Code:
    <script type="text/javascript">
    function findTotal(){
        var arr = document.querySelectorAll('#odhodki input');
        var tot=0;
        for(var i=0;i<arr.length;i++){
            if(parseInt(arr[i].value))
                tot += parseInt(arr[i].value);
        }
        document.getElementById('total').value = tot+'€';
    }
    
    function findTotal2(){
        var arr = document.querySelectorAll('#prihodki input');
        var tot=0;
        for(var i=0;i<arr.length;i++){
            if(parseInt(arr[i].value))
                tot += parseInt(arr[i].value);
        }
        document.getElementById('total2').value = tot+'€';
    }
    </script>
    findTotal = incomings
    findTotal2 = outcomings

    I would like to add one more, saldo between this number ( for example if incomings are 500, outcomings are 700, saldo will be -200 ). And i want to show this number as money format ( euro ).

    Thanks for helping me

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,255
    Not exactly sure if this is what you are trying to do
    since you did not supply any HTML or CSS to test against,
    so modify as needed for your requirements.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    
    <title> Quantity-Price-Cost Table </title>
    <style type="text/css">
     .odhodki { color:blue; width:75px; text-align:right; }
     .odhodkiHead { color:red; background-color:pink; width:75px; border:3px solid transparent; display: inline-block; }
    </style>
    
    </head>
    <body>
    <dl id="itemList">
     <dt>Description</dt>
     <dd>
      <div class="odhodkiHead"> Item </div>
      <div class="odhodkiHead"> Incoming </div>
      <div class="odhodkiHead"> Outgoing </div>
      <div class="odhodkiHead"> Saldo </div>
     </dd>
     <dd>
      <div class="odhodkiHead"> Ball </div>
      <input type="text" class="odhodki" value="">
      <input type="text" class="odhodki" value="">
      <input type="text" class="odhodki" value="">
     </dd>
     <dd>
      <div class="odhodkiHead"> Bat </div>
      <input type="text" class="odhodki" value="">
      <input type="text" class="odhodki" value="">
      <input type="text" class="odhodki" value="">
     </dd>
     <dd>
      <div class="odhodkiHead"> Base </div>
      <input type="text" class="odhodki" value="">
      <input type="text" class="odhodki" value="">
      <input type="text" class="odhodki" value="">
     </dd>
     <dd>
      <div class="odhodkiHead"> Glove </div>
      <input type="text" class="odhodki" value="">
      <input type="text" class="odhodki" value="">
      <input type="text" class="odhodki" value="">
     </dd>
     <dd>
      <div class="odhodkiHead"> Hat </div>
      <input type="text" class="odhodki" value="">
      <input type="text" class="odhodki" value="">
      <input type="text" class="odhodki" value="">
     </dd>
     <dd>
      <div class="odhodkiHead"> Shirt </div>
      <input type="text" class="odhodki" value="">
      <input type="text" class="odhodki" value="">
      <input type="text" class="odhodki" value="">
     </dd>
     <dd>
      <div class="odhodkiHead"> Shoes </div>
      <input type="text" class="odhodki" value="">
      <input type="text" class="odhodki" value="">
      <input type="text" class="odhodki" value="">
     </dd>
     <dd>
      <div class="odhodkiHead"> Pants </div>
      <input type="text" class="odhodki" value="">
      <input type="text" class="odhodki" value="">
      <input type="text" class="odhodki" value="">
     </dd>
     <dd>
      <div class="odhodkiHead"> Belt </div>
      <input type="text" class="odhodki" value="">
      <input type="text" class="odhodki" value="">
      <input type="text" class="odhodki" value="">
     </dd>
    </dl>
    Total: <input type="text" id="total" class="prihodki" value="" readonly>
    
    <script type="text/javascript">
    // From: http://www.webdeveloper.com/forum/showthread.php?290851-Saldo-between-two-numbers-and-money-format
    
    function findTotal(){
      var tot=0, income=0, outgo=0, saldo=0;
      var sel = document.getElementById('itemList').getElementsByTagName('input');
      for(var i=0;i<sel.length;i=i+3) {
        income = Number(sel[i].value) || 0;
        outgo = Number(sel[i+1].value) || 0;
        saldo = income-outgo;  sel[i+2].value = saldo.toFixed(2);
        tot += saldo;
      }
      document.getElementById('total').value = tot.toFixed(2)+'€';
    }
    window.onload = function() {
      var sel = document.getElementsByTagName('input');
      for(var i=0;i<sel.length;i++) { sel[i].onblur=findTotal; }
    }
    </script>
    </body>
    </html>
    Last edited by JMRKER; 02-24-2014 at 01:29 PM.

  3. #3
    Join Date
    Feb 2014
    Posts
    9
    I think that you understood it good, but i'll copy my codes again, and please help me with editing my code, because i'm very poor with JS.

    my JS code:
    Code:
    <script type="text/javascript">
    function findTotal(){
        var arr = document.querySelectorAll('#odhodki input');
        var tot=0;
        for(var i=0;i<arr.length;i++){
            if(parseInt(arr[i].value))
                tot += parseInt(arr[i].value);
        }
        document.getElementById('total').value = tot+'€';
    }
    
    function findTotal2(){
        var arr = document.querySelectorAll('#prihodki input');
        var tot=0;
        for(var i=0;i<arr.length;i++){
            if(parseInt(arr[i].value))
                tot += parseInt(arr[i].value);
        }
        document.getElementById('total2').value = tot+'€';
    }
    </script>

    HTML
    Code:
    <table>
    <tr>
    <td style="padding-right:50px;">
    <font style="font-size:14px; font-weight:bold; color: #999; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;">ODHODKI:</h2>
    <br> 
    <div id="odhodki">
    <input name="elektrikavoda" onblur="findTotal()" class="box2" style="width: 120px;" placeholder="Elektrika, voda">
    <input name="internettv" onblur="findTotal()" class="box2" style="width: 120px; margin-left: 50px;" placeholder="Internet, TV">  
    <input name="mobitel2" onblur="findTotal()" class="box2" style="width: 120px; margin-left: 50px;" placeholder="Mobitel"><br>  
    
    <input name="cigareti" onblur="findTotal()" class="box2" style="width: 120px; margin-top:10px;" placeholder="Cigareti">
    <input name="kredit" onblur="findTotal()" class="box2" style="width: 120px; margin-left: 50px;" placeholder="Kredit">  
    <input name="varcevanja" onblur="findTotal()" class="box2" style="width: 120px; margin-left: 50px;" placeholder="Varčevanja"><br> 
    
    <input name="gorivo" onblur="findTotal()" class="box2" style="width: 120px; margin-top:10px;" placeholder="Gorivo">
    <input name="hrana" onblur="findTotal()" class="box2" style="width: 120px; margin-top:3px; margin-left: 50px;" placeholder="Hrana">  
    <input name="otroci" onblur="findTotal()" class="box2" style="width: 120px; margin-left: 50px;" placeholder="Otroci"><br>
    
    <input name="prezivnina" onblur="findTotal()" class="box2" style="width: 120px;" placeholder="Preživnina">
    <input name="garderoba" onblur="findTotal()" class="box2" style="width: 120px; margin-top:10px; margin-left: 50px;" placeholder="Garderoba">
    <input name="zavarovanja" onblur="findTotal()" class="box2" style="width: 120px; margin-left: 50px;" placeholder="Zavarovanja">   
    </div><br><br>
    <font style="font-size:14px; font-weight:bold; color: #999; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;">
    ODHODKI SKUPAJ:</h2> <input type="text" id="total" style="background:none; border:none; font-size:14px; font-weight:bold; color: #333; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;" readonly/><br>
    <font style="font-size:14px; font-weight:bold; color: #999; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;">
    PRIHODKI SKUPAJ:</h2> <input type="text" id="total2" style="background:none; border:none; font-size:14px; font-weight:bold; color: #333; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;" readonly/>
    </td>
    
    <td valign="top">
    <font style="font-size:14px; font-weight:bold; color: #999; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;">PRIHODKI:</h2><br>
    <div id="prihodki">
    <input name="netoplaca" onblur="findTotal2()" class="box2" style="width: 120px;" placeholder="Neto plača">
    <input name="malicaprevoz" onblur="findTotal2()" class="box2" style="width: 120px; margin-left: 50px;" placeholder="Malica in prevoz">
    <input name="regres" onblur="findTotal2()" class="box2" style="width: 120px; margin-left: 50px;" placeholder="Regres"><br>
    <input name="dodatnodelo" onblur="findTotal2()" class="box2" style="width: 120px;" placeholder="Dodatno delo">   
                     
    <input name="stipendija" onblur="findTotal2()" class="box2" style="width: 120px; margin-top:10px; margin-left: 50px;" placeholder="Štipendija">
    <input name="zepnina" onblur="findTotal2()" class="box2" style="width: 120px; margin-left: 50px;" placeholder="Žepnina"><br>
    <input name="najemnine" onblur="findTotal2()" class="box2" style="width: 120px; margin-top:10px;" placeholder="Najemnine">
    <input name="otroskidodatek" onblur="findTotal2()" class="box2" style="width: 120px; margin-left: 50px;" placeholder="Otroški dodatek">  
    <input name="prezivnina2" onblur="findTotal2()" class="box2" style="width: 120px; margin-top:3px; margin-left: 50px;" placeholder="Preživnina">
    </div>
    </td>                           
    </td>
    </tr>
    </table>
    So i would like to add "SALDO" like SKUPAJ PRIHODKI(income) - SKUPAJ ODHODKI(outcome) = SALDO :
    Code:
    SALDO:</h2> <input type="text" id="total2" style="background:none; border:none; font-size:14px; font-weight:bold; color: #333; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;" readonly/>
    And want to show it like money format, for example 1.250,13€.

    Thank you very much for helping me.

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,255
    Since I do not know the language you are using within the code,
    can you explain to me what is wrong with the code I posted
    rather than me trying to decipher what you are using?
    What do you think needs to be changed to make it work better?
    Mine is a bit simpler for me to modify than what you posted in your language.

    The money format I am using is 1250.13€ in US notation.
    I'll need to do some research to come up with the format 1.250,13€ that you want.

  5. #5
    Join Date
    Feb 2014
    Posts
    9
    OK, i'll try to explain it better...

    My JS code:
    Code:
    <script type="text/javascript">
    function findTotal(){
        var arr = document.querySelectorAll('#odhodki input');
        var tot=0;
        for(var i=0;i<arr.length;i++){
            if(parseInt(arr[i].value))
                tot += parseInt(arr[i].value);
        }
        document.getElementById('total').value = tot+'€';
    }
    
    function findTotal2(){
        var arr = document.querySelectorAll('#prihodki input');
        var tot=0;
        for(var i=0;i<arr.length;i++){
            if(parseInt(arr[i].value))
                tot += parseInt(arr[i].value);
        }
        document.getElementById('total2').value = tot+'€';
    }
    </script>
    with "document.getElementById('total').value = tot+'€';" im showing outgoings and with "document.getElementById('total2').value = tot+'€';" i'm showing incomings..now i need another function like findTotal3, where i would do this: findTotal2 - findTotal, and i would like to show it, just like incomings and outcomigns, al numbers must be in money format..thats it, so i just need another function for findTotal2 - findTotal, thats it.

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,255
    Again you have given me some information that I don't understand, and so again, this is just a guess.
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    
    <title> Quantity-Price-Cost Table </title>
    <style type="text/css">
     .odhodki { color:blue; width:75px; text-align:right; }
     .odhodkiHead { color:red; background-color:pink; width:75px; border:3px solid transparent; display: inline-block; text-align:right; }
     .prihodki { color:green; text-align:right; width:75px; border:3px solid transparent; display: inline-block; }
    </style>
    
    </head>
    <body>
    <dl id="itemList">
     <dt>Description</dt>
     <dd>
      <div class="odhodkiHead"> Item </div>
      <div class="odhodkiHead"> Incoming </div>
      <div class="odhodkiHead"> Outgoing </div>
      <div class="odhodkiHead"> Saldo </div>
     </dd>
     <dd>
      <div class="odhodkiHead"> Ball </div>
      <input type="text" class="odhodki" value="">
      <input type="text" class="odhodki" value="">
      <input type="text" class="odhodki" value="">
     </dd>
     <dd>
      <div class="odhodkiHead"> Bat </div>
      <input type="text" class="odhodki" value="">
      <input type="text" class="odhodki" value="">
      <input type="text" class="odhodki" value="">
     </dd>
     <dd>
      <div class="odhodkiHead"> Base </div>
      <input type="text" class="odhodki" value="">
      <input type="text" class="odhodki" value="">
      <input type="text" class="odhodki" value="">
     </dd>
     <dd>
      <div class="odhodkiHead"> Glove </div>
      <input type="text" class="odhodki" value="">
      <input type="text" class="odhodki" value="">
      <input type="text" class="odhodki" value="">
     </dd>
     <dd>
      <div class="odhodkiHead"> Hat </div>
      <input type="text" class="odhodki" value="">
      <input type="text" class="odhodki" value="">
      <input type="text" class="odhodki" value="">
     </dd>
     <dd>
      <div class="odhodkiHead"> Shirt </div>
      <input type="text" class="odhodki" value="">
      <input type="text" class="odhodki" value="">
      <input type="text" class="odhodki" value="">
     </dd>
     <dd>
      <div class="odhodkiHead"> Shoes </div>
      <input type="text" class="odhodki" value="">
      <input type="text" class="odhodki" value="">
      <input type="text" class="odhodki" value="">
     </dd>
     <dd>
      <div class="odhodkiHead"> Pants </div>
      <input type="text" class="odhodki" value="">
      <input type="text" class="odhodki" value="">
      <input type="text" class="odhodki" value="">
     </dd>
     <dd>
      <div class="odhodkiHead"> Belt </div>
      <input type="text" class="odhodki" value="">
      <input type="text" class="odhodki" value="">
      <input type="text" class="odhodki" value="">
     </dd>
     <dd>
      <div class="prihodki"> Totals </div>
      <div id="totIncome" class="prihodki"> </div>
      <div id="totOutgo" class="prihodki"> </div>
      <div id="totSaldo" class="prihodki"> </div>
     </dd>
    </dl>
    
    <script type="text/javascript">
    // From: http://www.webdeveloper.com/forum/showthread.php?290851-Saldo-between-two-numbers-and-money-format
    
    function findTotal(){
      var totIncome=0, totOutgo=0, totSaldo=0, income=0, outgo=0, saldo=0;
      var sel = document.getElementById('itemList').getElementsByTagName('input');
      for(var i=0;i<sel.length;i=i+3) {
        income = Number(sel[i].value) || 0;
        outgo = Number(sel[i+1].value) || 0;
        saldo = income-outgo;  sel[i+2].value = saldo.toFixed(2);
        totIncome += income;    totOutgo += outgo;    totSaldo += saldo;
      }
      document.getElementById('totIncome').innerHTML = totIncome.toFixed(2)+'€';
      document.getElementById('totOutgo').innerHTML = totOutgo.toFixed(2)+'€';
      document.getElementById('totSaldo').innerHTML = totSaldo.toFixed(2)+'€';
    }
    window.onload = function() {
      var sel = document.getElementsByTagName('input');
      for(var i=0;i<sel.length;i++) { sel[i].onblur=findTotal; }
    }
    </script>
    </body>
    </html>
    Show the HTML you want and tell me how it differs from what I have provided.
    I need it in english because I'm a dumb American and only know one language.
    I truly do not understand what you are trying to accomplish from your description and HTML display from post #3.
    If it is not calculating the way you want, please show me where it differs from your requirements.

  7. #7
    Join Date
    Feb 2014
    Posts
    9
    Problem is because your code is like this:
    out come | income | saldo

    i need
    out come | income


    Outcomings:
    Incomings:
    Saldo:

  8. #8
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,255
    Quote Originally Posted by mbcl63 View Post
    Problem is because your code is like this:
    out come | income | saldo

    i need
    out come | income


    Outcomings:
    Incomings:
    Saldo:
    So change the order or the display contents of the existing HTML.
    Or remove the column and associated calculations for the column.

    The JS is not dependent on the HTML except for the SOME of the element names, not all,
    and one or two lines of the JS calculation section.

    Create the display similar to post #9, but put in english what the boxes represent
    and which are income and which are outgo and which are saldo(?).

    The display is the easiest part to change or fix.
    What is required is how are the calculations related to the display.

    See how easy it is to alter the code as I have done below...
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    
    <title> Quantity-Price-Cost Table </title>
    <style type="text/css">
     .odhodki { color:blue; width:75px; text-align:right; }
     .odhodkiHead { color:red; background-color:pink; width:75px; border:3px solid transparent; display: inline-block; text-align:right; }
     .prihodki { color:green; text-align:right; width:75px; border:3px solid transparent; display: inline-block; }
    </style>
    
    </head>
    <body>
    <dl id="itemList">
     <dt>Description</dt>
     <dd>
      <div class="odhodkiHead"> Item </div>
      <div class="odhodkiHead"> Incoming </div>
      <div class="odhodkiHead"> Outgoing </div>
     </dd>
     <dd>
      <div class="odhodkiHead"> Ball </div>
      <input type="text" class="odhodki" value="">
      <input type="text" class="odhodki" value="">
     </dd>
     <dd>
      <div class="odhodkiHead"> Bat </div>
      <input type="text" class="odhodki" value="">
      <input type="text" class="odhodki" value="">
     </dd>
     <dd>
      <div class="odhodkiHead"> Base </div>
      <input type="text" class="odhodki" value="">
      <input type="text" class="odhodki" value="">
     </dd>
     <dd>
      <div class="odhodkiHead"> Glove </div>
      <input type="text" class="odhodki" value="">
      <input type="text" class="odhodki" value="">
     </dd>
     <dd>
      <div class="odhodkiHead"> Hat </div>
      <input type="text" class="odhodki" value="">
      <input type="text" class="odhodki" value="">
     </dd>
     <dd>
      <div class="odhodkiHead"> Shirt </div>
      <input type="text" class="odhodki" value="">
      <input type="text" class="odhodki" value="">
     </dd>
     <dd>
      <div class="odhodkiHead"> Shoes </div>
      <input type="text" class="odhodki" value="">
      <input type="text" class="odhodki" value="">
     </dd>
     <dd>
      <div class="odhodkiHead"> Pants </div>
      <input type="text" class="odhodki" value="">
      <input type="text" class="odhodki" value="">
     </dd>
     <dd>
      <div class="odhodkiHead"> Belt </div>
      <input type="text" class="odhodki" value="">
      <input type="text" class="odhodki" value="">
     </dd>
    </dl>
    <div> Totals </div>
    <div id="totIncome"> </div>
    <div id="totOutgo"> </div>
    <div id="totSaldo"> </div>
    
    <script type="text/javascript">
    // From: http://www.webdeveloper.com/forum/showthread.php?290851-Saldo-between-two-numbers-and-money-format
    
    function findTotal(){
      var totIncome=0, totOutgo=0, totSaldo=0, income=0, outgo=0, saldo=0;
      var sel = document.getElementById('itemList').getElementsByTagName('input');
      for(var i=0;i<sel.length;i=i+2) {
        income = Number(sel[i].value) || 0;
        outgo = Number(sel[i+1].value) || 0;
        saldo = income-outgo;
        totIncome += income;    totOutgo += outgo;    totSaldo += saldo;
      }
      document.getElementById('totIncome').innerHTML = 'Income: '+totIncome.toFixed(2)+'€';
      document.getElementById('totOutgo').innerHTML = 'Outgo: '+totOutgo.toFixed(2)+'€';
      document.getElementById('totSaldo').innerHTML = 'Saldo: '+totSaldo.toFixed(2)+'€';
    }
    window.onload = function() {
      var sel = document.getElementsByTagName('input');
      for(var i=0;i<sel.length;i++) { sel[i].onblur=findTotal; }
    }
    </script>
    </body>
    </html>
    Last edited by JMRKER; 02-25-2014 at 08:55 AM.

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