[js] Value numeric maken?

[semicon]

Hallo,

Ik heb het idee dat bij het volgende scriptje de waarde van ExtraP niet numeric is ofzo, want de uitkomst wordt erbij geplaats en niet erbij opgeteld.

code:

var ExtraP = 0;
var TotalP = document.getElementById('totalprice').value;
var GewichtP = document.getElementById('gewprice').value;

function EditTotal() {
    if(zform.verzendmethode.value==1) { ExtraP = TotalP; }
    if(zform.verzendmethode.value==2) { ExtraP = TotalP + (GewichtP + 6); }
    if(zform.verzendmethode.value==3) { ExtraP = (TotalP + GewichtP); }
    document.getElementById('NewPrice').innerHTML = "€ " + ExtraP;
}

Nog even dit voorbeeld,

als Totaal 30 is, Gewichtp(rijs) bijv. 9 is en verzendmethode 2 (dat als waarde 6 heeft), dan komt er 3096 te staan

Help?

[Wolf87]

ik kan je zo vertellen dat het de getallen strings zijn.
zou je daarom misschien ook het form kunnen posten?

[Verwijderd]

gebruik parseInt()

[semicon]

Hier dan het form

code:

<select name="verzendmethode" onchange="EditTotal()">
    <option value="1">Ophalen van balie</option>
    <option value="2">TPG Post Rembours</option>
    <option value="3">TPG Post met vooruitbetaling</option>
</select>

ParseInt werkt denk ik ook wel, maar weet niet waarom dit niet werkte, al begint nu wel wat de dagen over strings..

[crisp]

Ik zou het ophalen van TotalP en GewichtP ook in de functie zetten; als je die buiten de functie zet dan krijg je daar waarschijnlijk een 'object not found' op. Daarbij moeten die waarden ook omgezet worden naar integers of floats (met parseFloat() - als er decimalen in zitten). Nog beter is eigenlijk om te checken of die elementen wel geldige numerieke data bevatten. Het delen door 1 is een truukje waarbij je gebruik maakt van de weaktyping van javascript
De waarde van je select hoef je helemaal niet om te zetten naar een integer; je rekent er immers niet mee. Voor het overzicht zou ik gebruik maken van een switch ipv 3 if's, en de referentie naar de select al met de functiecall meegeven (scheelt weer een lookup en je maakt je functie flexibeler).
Als laatste zou ik innerHTML hier niet gebruiken; je wilt enkel een textNode aanpassen, en de echte DOM methoden voldoen hier prima. Ik ga er hier van uit dat er al een textNode is, maar je kan ook een uitvraging daarop doen en eventueel on the fly een textNode appenden.

JavaScript:

function EditTotal(el) {

  var ExtraP = 0;
  var TotalP = document.getElementById('totalprice').value / 1;
  var GewichtP = document.getElementById('gewprice').value / 1;
// of: parseInt/parseFloat(xxx.value, 10);

  switch (el[el.selectedIndex].value) {
    case '1':
      ExtraP = TotalP;
      break;
    case '2':
      ExtraP = TotalP + (GewichtP + 6);
      break;
    case '3':
      ExtraP = TotalP + GewichtP;
      break;
  }
  document.getElementById('NewPrice').firstChild.nodeValue = '€ ' + ExtraP;
}

HTML:

<select name="verzendmethode" onchange="EditTotal(this)">
    <option value="1">Ophalen van balie</option>
    <option value="2">TPG Post Rembours</option>
    <option value="3">TPG Post met vooruitbetaling</option>
</select>

[ Voor 4% gewijzigd door crisp op 28-08-2004 11:58 ]

[semicon]

WHOW!

echt super, heel erg bedankt, en erg bedankt voor de uitleg erbij, daar heb ik zeker wat aan, harstikke top, mijn vraag is beantwoord, dus deze mag dicht.

[crisp]

dus deze mag dicht

Niet alle beantwoorde topics hoeven dicht hoor

[Verwijderd]

crisp schreef op 28 augustus 2004 @ 11:56:

JavaScript:

document.getElementById('NewPrice').firstChild.nodeValue = '€ ' + ExtraP;

Foei crisp, € in een nodeValue zetten?

[ Voor 8% gewijzigd door Verwijderd op 28-08-2004 12:27 ]

[semicon]

Ik weet niet eens wat dat is, is dat beter ofzo?

Ik gebreuik stiekem nu innerHTML omdat ik toevallig weet dat dat met een <p> element werkt... maar die nodeValue? is dat weer beter, of voor meerdere browsers dan?

En €? niet goed? € <-? of?

EDIT:

Aleen jammer dat hij nu ExtraP als NaN aangeeft

code:

function EditTotal(el) {
    var ExtraP = 0;
    var TotalP = document.getElementById('totalprice').value / 1;
    var GewichtP = document.getElementById('gewprice').value / 1;
                
    switch (el[el.selectedIndex].value) {
        case '1':
            ExtraP = TotalP;
            break;
        case '2':
            ExtraP = TotalP + (GewichtP + 6);
            break;
        case '3':
            ExtraP = TotalP + GewichtP;
            break;
    }
    document.getElementById('NewPrice').innerHTML = '€ ' + ExtraP;
}

[ Voor 53% gewijzigd door semicon op 28-08-2004 13:33 ]

[crisp]

Wordt TotalP en/of GewichtP dan wel goed gevuld?

En innerHTML wordt door bijna alle browsers inmiddels wel ondersteund, maar is geen onderdeel van de DOM standaard. Voor het wijzigen van enkel een textNode is de DOM methode ook sneller; als je echt dynamisch hele lappen HTML wilt toevoegen dan is innerHTML vaak wel de beste keuze.

[semicon]

Hmm. je hebt gelijk, als ik even snel in een alert TotalP toevoeg, zegt hij dat hij er niet is.

Maar de hidden input veld staat er wel als ik in de bron kijkt.

code:

<input type="hidden" name="gewprice" value="9">
<input type="hidden" name="totalprice" value="218,5">

stukie verder... 

var TotalP = document.getElementById('totalprice').value/1;
var GewichtP = document.getElementById('gewprice').value/1;

Zal toch niet die comma zijn? gewprice staat er wil in. als ik een alert op roep.
(hmpf. ik zuig echt te hard in dit js.)


EDIT:
ik hebn ff een artikel die afgerond is getest, en dan doet hij het wel! Nu moet ik dus een comma fixen

verder werkt hij helemaal, nu alleen dit nog.

crisp is echt de 5k master, thx voor de tips

[ Voor 48% gewijzigd door semicon op 28-08-2004 15:37 ]

[crisp]

getElementById verwijst naar een element met een ID attribuut. In jouw geval, aangezien het ook hidden elements in hetzelfde formulier zijn, kan je ook dit doen:

JavaScript:

var TotalP = el.form.elements['totalprice'].value/1;
var GewichtP = el.form.elements['gewprice'].value/1;

en in JS is de decimal delimiter een punt en geen komma!

probeer anders zo:

JavaScript:

var GewichtP = parseFloat(el.form.elements['gewprice'].value.replace(',','.'));

[ Voor 26% gewijzigd door crisp op 28-08-2004 15:38 ]

[semicon]

Ja hoor, die laatste editreply van crisp was het..

wel lang voor zon klein probleemje eigenlijk, maar toch top dat het nu werkt.

Ik denk dat de combinatie van ASP/JS en 4 weken vakantie ff killing was.

[ Voor 23% gewijzigd door semicon op 28-08-2004 15:44 ]

[crisp]

JS is heel erg een do-it-yourself taal; het heeft niet veel ingebouwde methods ivm serverside talen als ASP.NET en PHP. Voordeel is wel dat door de 'OO'-opzet (eigenlijk moet ik zeggen: de mogelijkheid tot prototyping) je makkelijk je eigen methods kan maken.
In jouw geval zou je een toNumber() method kunnen maken die een string omzet naar een numeriek formaat:

JavaScript:

String.prototype.toNumber = function() { return parseFloat(this.replace(',','.')); }

je kan dan dit doen:

JavaScript:

var GewichtP = el.form.elements['gewprice'].value.toNumber();

[semicon]

awesome news...

maareh, nu we toch bezig waren, ik zit alleen nog met 1 ding dat niet werkt, maar wat ik wel d8 dat zo zou werken...

zelfs op GoT staat het maar.. w8 ff searchen

pimlie schreef op 06 juli 2001 @ 12:54:
... Wat je dus kan doen is die value tijdelijk met 100 vermenigvuldigen, dan afronden en dan weer door 100 delen.

Dan heb je 2 cijfers achter de komma

Dit werkt niet?

Nee, zou ik zeggen, want dat heb ik gemaakt en het werkt niet!

code:

ExtraP = Math.round(ExtraP*100)/100;

Of doe ik het nu zo fout?

Heb ook het volgende geprobeerd.

code:

ExtraP=ExtraP.match(/^\d*\.\d{2}/);

Maar dit (waar ik die naam niet van weet) ben ik zo slecht in, en zal wel fout zijn...

Maar 2 decimalen bij bijv. 200, 200.5 of 200.75 is lastig..

[crisp]

je bedoelt voor het weergeven? Je kan eens kijken naar deze javascript implementatie van sprintf() of schrijf je eigen method speciaal hiervoor.
quick & dirty:

JavaScript:

Number.prototype.toFormattedString = function(decimals) {

  var d = Math.pow(10, decimals);
  var n = Math.round(this * d) / d;
  var s = Math.round(n * d) + '';
  return s.substring(0,s.length-decimals)+','+s.substring(s.length-decimals);

}

var a = 10.126;
alert(a.toFormattedString(2));

[semicon]

Echt een vet scriptje, maar, jammer dat die van jou niet werkt als je 1 of 2 cijfers achter de comma hebt.

Althans, als ik niks fout doe. want 49,50 rond hij af naar 49,00. met de ,00 .

34 wel naar 34,00..


En die sptrinf ofzo, dat moet toch kleiner kunnen o_0 ! anders ziet mijn bestelwebby er ineens wel heel prof. uit

[ Voor 5% gewijzigd door semicon op 28-08-2004 16:39 ]

[crisp]

ik snap je even niet; wil je nou afronden of weergeven op 2 decimalen, zelfs als er meer of minder decimalen zijn?

[semicon]

eh ja, dat heeft weergeven niet afronden...

ik wou dat weergeven, ben nu niet meer op mn "werkplek" maar kan info nog altijd gebruiken, aomdat ik de oplossing nog niet had.

[Verwijderd]

Ik zie dat de methode toFixed nog niet is genoemd. Het kan zijn dat crisp dat niet heeft genoemd wegens slechte ondersteuning door oudere browsers, maar het is wel de correcte manier. Alhoewel crisp's manier wel andere decimale tekens ondersteunt.

[crisp]

toFixed is inderdaad een stap in de goede richting; als je echter meer controle wilt over de output dan grijp ik echter toch sneller naar custom methods, waarvan de eerder genoemde sprintf mijn absolute voorkeur heeft
Hierdoor ben ik nogal genegen toFixed() over het hoofd te zien

[ Voor 14% gewijzigd door crisp op 28-08-2004 23:58 ]

[semicon]

Ik heb dat toFixed nu ook gevonden, is wel een hele sexy manier maar, alleen vanaf Javascript 1.5! o_0

Ik maar een webby die voor iedereen een beetje toegankelijk moet zijn, dus denk ik, dat het die sprintf moet worden, in ieder geval bedankt voor alle tips en de hulp.