Funkcija za izracunavanje proseka

[ Athlas @ 09.02.2013. 22:24 ] @

Pokusavam da podesim skriptu pomocu on-line tutorijala posto povrsno poznajem Javascript ali ne ide...

Evo koda, ne mogu da uklopim funkciju da mi racuna prosek iako deluje jednostavno, nece da radi vec mi izbacuje NaN !

Code:
<html>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<head>

<style type="text/css">
body {
    width: 800px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    font-family: Arial;
    font-size: 12px;
}
.total {
    padding-left: 30px;
  }
.total-sub {
    padding-left: 190px;
  }

.tip {
    font-size: 10px;
    color: #333;
  }
button, input, textarea, select {
  text-rendering: optimizeLegibility;
  font-size:100%;
  text-align: center;
}

/*pre,form,fieldset,input,textarea,blockquote,th,td {
    padding:0;
}*/
table {
  border-collapse:collapse;
  border-spacing:0;
}
/*fieldset,img {
  border:0;
}*/
address,caption,cite,code,dfn,em,strong,th,var {
    font-style:normal;
    font-weight:bold;
    color: #666;
}
/*caption,th {
  text-align:left;
}*/
.text table, td, th {
    border: 1px solid #fff;
    padding-top: 2px;
    padding-right: 2px;
    padding-bottom: 2px;
}
.td_color {
    background-color: #CCC;
}
.tip {
    font-size: 11px;
    color: #333;
  }
.g_total {
    padding-left: 320px;
    font-weight: bold;
    color: #FF0000;
    border: thin solid #CCCCCC;
}

</style>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type='text/javascript'>
$(function () {
    $(".items").keyup(function (event) {
        var total = 0;
        $(".items").each(function () {
            var gtotal = 0;
            $(this).find(".targetfields").each(function () {
           var qty = parseInt($(this).find(".quantity").val()||'0');
           var rate = parseInt($(this).find(".rate").val()||'0');
                var subtotal = qty * rate;
                $(this).find(".subtotal").val(subtotal);
                if (!isNaN(subtotal)) gtotal += subtotal;

            });
            $(this).find(".g_total").html(gtotal + "Din");
            total += gtotal;
        });
        $("#total").html(total + "Din");
    });

});

    //trebalo bi da izracuna UKUPNU POTROSNJU ÷ CLANOVIMA DOMACINSTVA
function culateSum()
    {
        var total = parseFloat(document.getElementById("total").value, 10);
        var suma = parseFloat(document.getElementById("suma").value, 10);
        document.getElementById("Sum").value = total / suma;

    }

</script>

</head>
<body>
<div class="main_content">
           <table class="items" border="1" width="100%">
        <tr>
        <td align="center" colspan="5">Upišite koliko puta dnevno obavite neku od aktivnosti<br />

     
        </td>
        </tr>
        <tr>
        </tr>

<td align="left" colspan="5"><strong>...</strong></td>

             <tr class="targetfields">
            <td width="5%">1</td>
            <td width="25%">Kupanje u kadi</td>
           <td width="25%"><input type="text" value="80" name="quantity" class="quantity" size="5" disabled /></td>
            <td width="20%"><input type="text" name="rate" class="rate" size="5" /></td>
            <td width="25%"><input type="text" name="sub_total" class="subtotal" size="5"/></td>
        </tr>

        <tr class="targetfields">
            <td width="5%">2</td>
            <td width="25%">Tuširanje</td>
       <td width="25%"><input type="text" value="35" name="quantity" class="quantity" size="5" disabled /></td>
            <td width="20%"><input type="text" name="rate" class="rate" size="5" /></td>
            <td width="25%"><input type="text" name="sub_total" class="subtotal" size="5"/></td>
        </tr>

          <tr class="targetfields">
            <td width="5%">3</td>
            <td width="25%">Pranje zuba</td>
         <td width="25%"><input type="text" value="10" name="quantity" class="quantity" size="5" disabled /></td>
            <td width="20%"><input type="text" name="rate" class="rate" size="5" /></td>
            <td width="25%"><input type="text" name="sub_total" class="subtotal" size="5"/></td>
        </tr>
           <tr class="targetfields">
            <td width="5%">3</td>
            <td width="25%">Pranje veša</td>
           <td width="25%"><input type="text" value="100" name="quantity" class="quantity" size="5" disabled /></td>
            <td width="20%"><input type="text" name="rate" class="rate" size="5" /></td>
            <td width="25%"><input type="text" name="sub_total" class="subtotal" size="5"/></td>
        </tr>

       <tr class="targetfields">
        <td align="right"> </td>
        <td align="right"> </td>
        <td class="g_total" align="right" colspan="5">UKUPNO KUPATILO : </td>
        </tr>

        </table>



          <table class="items" border="1" width="100%">
        <tr>
        <td align="center" colspan="4">izračunati potrošnju po osobi <br />(UKUPNA POTROŠNjA ÷ SA BROJEM ČLANOVA U KUĆI)
        </td>
        </tr>

         <tr class="targetfields">
        <td width="25%">podelite ukupnu potrošnjnu sa brojem članova domaćinstva; <br /><strong>( ÷ )</strong></td>
        <td width="15%"> Br.članova <br /><input type="text" id="suma" name="suma" value="" size="3" onBlur="culateSum();"/></td>
        <td id="total" align="right" colspan="5"><strong>UKUPNA POTROŠNjA :</strong><input type="text" name="total" value="" size="3" onBlur="culateSum();"/></td>
        </tr>
   <tr>
        <td align="right"> </td>
        <td align="right"> </td>
        <td align="right" colspan="5"><strong>POTROŠNjA PO OSOBI :</strong><input type="text" id="Sum"/></td>
        </tr>

         <tr>
            <td width="5%"> </td>
            <td width="25%"> </td>
            <td width="25%"> </td>
            <td width="20%"> </td>
            <td width="25%"> </td>
        </tr>
          <td align="center" colspan="5"><strong>... </strong>
        </td>
        </table>

      </div>

</body>
</html>

Da li neko moze da pomogne oko ovoga?

Slika: [img][/img]

[ nemnesic @ 10.02.2013. 11:21 ] @

Problem je bio u tome sto si imao "Din" ppored broja. Tako kada si pokusao da prasujes broj javio ti je "not a number NaN" error

Ja sam ti resio tako sto sam dodao jedan hidden field koji se zove "hideTotal". Onda sam tu sacuvao total vrednost bez "Din". I onda kada radis na kraju parsovanje samo citas tu vrednost.

evo resenja: http://jsfiddle.net/GPfda/

Inace tvoj problem moze da se resi na jos elegantiji nacin. Ali to je na tebi da sredis. Evo ti nekoliko saveta:

Code:

1. Nemoj da koristis "document.getElementById("total")"
To se moze lepo zameniti sa $('#total').val();

2. totaj svaok elementu ID vrednost i nemoj da koristis .find() funkciju non stop. To suporava izvrsavanje jer pretrazuje ceo DOM. Zato dodaj ID i onda
set-uj vrednost ovako $(''#ID').val(VREDNOST);
get-uj vrednost ovako $('#ID').val();

3. Nemoj da koristis hidden fields da bi sacuvao vrednosti (to sam ja uradio zato sto je lakse objasniti).Vec napravi global veriable unutar JS.

var _globalVar_1;
i onda tu setuj i get-uj vrednosti.

4. nemoj unutar HTML-a da stavljas "onClick" ili "onBlur". Vec napisi js funkije koje ces da "bind"-ujes kada se ucita strana.

toliko od mene. nadam se da sam pomogao.

[ raaddd @ 10.02.2013. 11:23 ] @

U funkciji culateSum() za promenljivu total ti treba innerHTML jer je u pitanju ćelija tabele, ne value:

var total = parseFloat(document.getElementById("total").innerHTML, 10);

[ Athlas @ 10.02.2013. 13:10 ] @

Citat:

nemnesic:
Problem je bio u tome sto si imao "Din" ppored broja. Tako kada si pokusao da prasujes broj javio ti je "not a number NaN" error

Ja sam ti resio tako sto sam dodao jedan hidden field koji se zove "hideTotal". Onda sam tu sacuvao total vrednost bez "Din". I onda kada radis na kraju parsovanje samo citas tu vrednost.

evo resenja: http://jsfiddle.net/GPfda/

Inace tvoj problem moze da se resi na jos elegantiji nacin. Ali to je na tebi da sredis. Evo ti nekoliko saveta:

toliko od mene. nadam se da sam pomogao.

Druze, nije da si pomogao nego svaka ti cast MNOGO si pomogao, zapravo resio si mi glavobolju.
Drgacije je kad googlas, ovako objasnjeno je pravi skolski primer.
Sto se tice elegancije, mogao bih da dodam jos par funkcija tipa:
- za unos slova ili drugih karaktera da se ne pojavljuje NaN vec da dobije porku (na pr."Unesite numericku vrednost") ..itd...
al' to su nijanse koje se mogu naknadno dodavati.

U svakom slucaju mnogo ti hvala na savetima i resavanju ovog zadatka.Javascript je kompleksan i ne uci se za dva dana.

Pozdrav :)

[ Athlas @ 10.02.2013. 13:20 ] @

Citat:

raaddd:
U funkciji culateSum() za promenljivu total ti treba innerHTML jer je u pitanju ćelija tabele, ne value:

var total = parseFloat(document.getElementById("total").innerHTML, 10);

Probao sam da izmenim liniju za funkciju "culateSum()" ali nema nekih promena , osim ako ja ne uvidjam razliku izmedju unete vrenosti u ćeliju .

[ raaddd @ 10.02.2013. 13:37 ] @

Podigao sam na fiddle:
http://jsfiddle.net/rashomon/qUsRf/

Izloguj "total" u konzoli unutar te funkcije i videćeš da je undefined:
console.log(total);

[ Athlas @ 11.02.2013. 18:49 ] @

Ok. proverio sam funkcija radi odlicno, no ispostavilo se da sam ceo koncept pogresno postavio ...

Trebalo bi u celoj srednoj koloni u poljima da korisnik može da deli na pr.3/7=3,42 i da se u istom tom polju pojavi rezultat, pa tek onda da prikaže sumu.
Ne znam ni kako da trazim tu funkciju ni da li je to uopšte izvodljivo??

Code:
              <table class="items" border="0" width="100%">
        <tr>
        <td align="center" colspan="5">Upišite koliko puta dnevno obavite neku od aktivnosti<br />

    <p class="tip"> * Ukoliko neku aktivnost ne ponavljate svaki dan podelite nedeljni broj te aktivnosti sa 7 kako biste dobili dnevni prosek. (NPR: mašinu za veš uključujete 3 puta nedeljno, pa ćete u polje upisati 3/7=0.43) </p>
        </td>
        </tr>
        <tr>

<td align="left" colspan="5"><strong>...</strong></td>

           <tr class="targetfields">
            <td width="5%"></td>
            <td width="25%">Pranje veša</td>
           <td width="25%"><input type="text" value="100" name="quantity" class="quantity" size="5" disabled /></td>
            <td width="20%"><input type="text" name="rate" value="3/7" class="rate" size="5" /></td>
            <td width="25%"><input type="text" name="sub_total" class="subtotal" size="5"/></td>
        </tr>

       <tr class="targetfields">
        <td align="right"> </td>
        <td align="right"> </td>
        <td class="g_total" align="right" colspan="5">UKUPNO KUPATILO : </td>
        </tr>

        </table>

[ Athlas @ 13.02.2013. 14:16 ] @

Jel zna neko gde da guglam ..?