Afronden resultaat form op 2 cijfers achter de komma

[tvoorbij]

Hallo, ik weet nauwlijks iets van programeren van javascript maar vond dit script die ik mooi kon inpassen in mijn pagina. Ik vind het alleen niet fraai dat de uitkomst in sommige gevallen een hele lange rij heeft achter de komma. Ik zou willen volstaan met 2 cijfers achter de komma. Ik heb wel gezocht naar een oplossing en dingen geprobeerd. Ik weet er echter te weinig van.
Hieronder het script en formulier:

<script type="text/javascript" language="JavaScript">// <![CDATA[
function CalculateFOC(Atext, Btext, form) { var L = parseFloat(Atext); var B = parseFloat(Btext); form.Answer.value = (B / L-.5)*100; } function ClearForm2(form) { form.input_L.value = ""; form.input_B.value = ""; form.Answer.value = ""; }
// ]]&gt;</script>
<form method="post" name="Calculator" id="Calculator"><table border="0" align="center" cellpadding="0" cellspacing="20">
<tr>
<td>
waarde L:
<input type="text" name="input_L" size="4" />

</td>
<td>waarde B:
<input type="text" name="input_B" size="4" /></td>
<td><strong>FOC</strong> =
<input type="text" name="Answer" size="5" id="Answer" />
% </td>
<td align="right"><input onclick="CalculateFOC(this.form.input_L.value, this.form.input_B.value, this.form)" type="button" name="AddButton" value="bereken FOC" /> <input onclick="ClearForm2(this.form)" type="button" name="ClearButton" value="wissen" /></td>
</tr>
</table></form>

Ik hoop dat er iemand is dit mij kan helpen.

Bij voorbaat dank,

Theo

 

[csshunter]

Hoi Theo,
Voor afronden kan je de Math.round(getal) methode gebruiken, die afrondt op het dichtstbij liggende gehele getal.

Wil je afronden met twee cijfers achter de komma, dan laat je de Math.round los op het getal vermenigvuldigd met 100, en deelt dat na afloop van het afronden weer terug door 100:
[JS]<script type="text/javascript">
// <![CDATA[
function CalculateFOC(Atext, Btext, form) {
var L = parseFloat(Atext);
var B = parseFloat(Btext);
var formule = (B / L-.5)*100;
form.Answer.value = Math.round(formule*100)/100;
}
function ClearForm2(form) {
form.input_L.value = "";
form.input_B.value = "";
form.Answer.value = "";
}
// ]]>
</script>[/JS]

• Test: afronden.htm
• In de test even een alert erbij gezet, die het onafgeronde getal laat zien.

Met vriendelijke groet,
CSShunter
__________
PS: Uit pure nieuwsgierigheid: wat betekent FOC in dit geval? Of staat ie er niet bij?

 

[tvoorbij]

Hallo CSSHunter,

Eerst enorm bedankt voor de hulp. Ik stel dat zeer op prijs! Ik wist dat het iets met "Math.round(getal)" moest zijn maar kan de script niet daarop aanpassen bij gebrek aan kennis daarvan. Heb wel één en ander geprobeerd uit voorbeelden maar kreeg het niet werkend.

Het is "Front of Center", ik ben de maker en webmaster van www.eemschutters.nl.
Met deze link kom je op de bewuste pagina. (onderaan staat de formule) http://eemschutters.nl/handboogschieten/depijl.html

Nogmaals dank,

Theo

 

[csshunter]

Hoi Theo,
Ah, FOC = Front Of Center % = percentage dat het balanspunt van een pijl vóór het midden van de pijl ligt. Weer wat geleerd!

Dan heb ik nog een suggestie voor je.
Bij het invullen van de lengtes zullen een aantal mensen dat voor de nauwkeurigheid in mm willen doen, en dan de Nederlandse notatie gebruiken:

57,7 = 57cm + 7 mm​

Maar ... in javascript moet de Amerikaanse notatie gebruikt worden, waarin onze komma een punt is (en onze punt voor de duizendtallen een komma): precies omgekeerd!

• Als javascript in de ingevulde waarde een komma ziet en de waarde via parseFloat(waarde) tot een getal wordt gemaakt, dan doet de komma niet mee voor het getal, en alles wat daarna komt ook niet ...

Betekent: bij invullen in de FOC Calculator kan het mis gaan!

• Wie bij bv. een L=83.1 een B=47.8 invult, krijgt als uitkomst: FOC = 7.52 % (dat is het correcte %).
• Wie bij bv. een L=83,1 een B=47,8 invult, krijgt als uitkomst: FOC = 6.63 %.
• De op de Calculater vertrouwende invuller ziet nergens aan, dat het niet klopt...

In beide gevallen komt er keurig een getal met 2 cijfers achter de komma, en slechts een enkeling zal het opvallen dat er in de uitkomst een punt staat i.p.v. een komma > maar ook dat hoeft niet te betekenen dat de berekening niet goed ging.

• In deze test kan je het uitproberen: afronden-2.htm
• In een alert worden tussentijds de getallen aangegeven die voor de berekening worden gebruikt.

"FOC", als het ware!

=======
Gelukkig is ook hiervoor een oplossing.

Voordat de parseFloat wordt gelanceerd, kunnen de (eventuele) komma's in punten worden omgezet met de functie replace('teken1','teken2'), waarbij een teken1 (als aanwezig) wordt veranderd in teken2:
[JS]...
var L= Atext.replace(',','.');
var B= Btext.replace(',','.');
L = parseFloat(L);
B = parseFloat(B);
...[/JS]

• Als er géén komma in staat (maar een punt of alleen een heel getal), gebeurt er niets, en gaat de waarde gewoon door naar de volgende stap.

Voor de uitkomst is het wenselijk dat de punt juist weer een komma wordt.
Daarvoor moet eerst het antwoord van getal tot string (letterteken-serie) worden gemaakt, wat kan door er een lege string achter te zetten met +''. Daarna kan het vervangen gebeuren, en het antwoord in het vakje geplaatst worden:
[JS]...
var antw=Math.round(formule*100)/100;
antw=antw+'';
antw=antw.replace('.',',');
form.Answer.value = antw;[/JS]

• Test: afronden-3.htm
• Weer voorzien van alerts om de stappen te kunnen volgen.

=======

Finishing touch
Voor het mooi kan nog wat verfraaiing worden aangebracht, bv. onmogelijk maken van invullen en "uitgrijzen" van het antwoordvakje, vet maken van het antwoord, antwoord-getal rechts in het vakje zetten, en achtergrondkleur van het antwoord lichtgroen maken als het antwoord in de voorkeurs-range van 7 tot 10% ligt, en anders lichtrood. Dat kan met wat css in de <head> van de pagina erbij:

<style type="text/css">
#Answer {
	border: 1px solid #809DB9;
	text-align: right;
	padding-right: 3px;
	font-weight: bold;
	color: black;
	}
</style>

De html kan dan worden:

<form method="post" name="Calculator" id="Calculator">
	<table border="0" align="center" cellpadding="0" cellspacing="20">
		<tr>
			<td>waarde L: <input type="text" name="input_L" size="4" /></td>
			<td>waarde B: <input type="text" name="input_B" size="4" /></td>
			<td><strong>FOC</strong> = 
				<input type="text" name="Answer" size="3.5" id="Answer" disabled="disabled" /> %</td>
			<td>
				<input onclick="CalculateFOC(this.form.input_L.value, this.form.input_B.value, this.form)" 
				type="button" name="AddButton" value="bereken FOC" />
				<input onclick="ClearForm2(this.form)" type="button" name="ClearButton" value="wissen" />
			</td>
		</tr>
	</table>
</form>

Met als javascript:
[JS]<script type="text/javascript">
// <![CDATA[
function CalculateFOC(Atext, Btext, form) {
var L= Atext.replace(',','.');
var B= Btext.replace(',','.');
L = parseFloat(L);
B = parseFloat(B);
var formule = (B / L-.5)*100;
var antw=Math.round(formule*100)/100;
if (antw>=7 && antw<=10){
document.getElementById('Answer').style.background='#F5FFF5';
}
else {
document.getElementById('Answer').style.background='#FFF1EB';
}
antw=antw+'';
antw=antw.replace('.',',');
form.Answer.value = antw;
}
function ClearForm2(form) {
form.input_L.value = "";
form.input_B.value = "";
form.Answer.value = "";
document.getElementById('Answer').style.background='';
}
// ]]>
</script>
[/JS]

• Resultaat: afronden-4.htm
• Internet Explorer en Opera kunnen niet 100% de opgegeven styles in het antwoordvak weergeven, de rest (Firefox, Chrome, Safari) wel.

Mocht je het echt helemaal cross-browser hetzelfde willen hebben, dan zou dat kunnen door het antwoordvak geen <input> veld te laten zijn, maar een gewone <div>; met navenante aanpassing van het javasript.

Met vriendelijke groet,
CSShunter

[edit]![/edit] O, vergeet ik helemaal te zeggen: hele leuke site! :thumb:

 

[tvoorbij]

WOW!!, ongelofelijk dat je dat zo snel beredeneerd. Ik had werkelijk geen idee toen ik het overnam dat er een verschil kon zijn met komma en punt. Ik gebruik standaard een punt maar niet iedereen zal dit doen. Ga er straks gelijk mee aan de slag. Met de kleur ligt het wat anders omdat het vaak niet zó nauw komt. Maar het is aan de andere kant ook weer leuk om mensen aan het denken te zetten als ze er gebruik van maken dat het niet (helemaal) klopt.
Boogschieten is inmiddels een verslaving geworden. Ben ruim een jaar geleden (ben nu 53) begonnen en het gaat werkelijk heel erg goed. Momenteel sta ik op 18, 25 en 30 meter met de hoogste clubscore. Hierdoor komt er nu ineens meer competitie in de club omdat men daarvoor zelden naar scores e.d. keek. Onze trainer wil (moet) nu aan de bak omdat het ergens steekt. Als je het echter naar de echte top bekijkt is er natuurlijk ook weer enorm veel verschil. Die schieten praktisch alleen tienen en zelden iets anders. Dat gaat mijn nooit meer lukken maar verbeteren gaat nog steeds. Het leuke is dat het een gevecht met jezelf is. Je hebt wel competitie maar uiteindelijk moet jij het doen ongeacht wat een ander schiet.

Gezien je enorme kennis van deze (wiskundige) materie heb ik nog, als ik brutaal mag zijn, een vraagje. Wij worstelen met de competitie met de handicap toepassing. Met name het verschil met schutters is een probleem. Aan het feit dat als iemand begint en vrij snel daarna veel beter gaat schieten kan ik niets doen, dat zit nu eenmaal in het spel. Alleen wat een probleem is in deze sport (net als bowling) is dat je om in de hoogste scores nog hoger te komen de marge om dat te doen steeds kleiner wordt. Wij doen bijv. 10 maal 3 pijlen waarbij 300 maximale score is. Echter iemand die 210 schiet heeft nog 90 punten te winnen waarbij je als je 270 schiet nog maar 30 punten kan "verdienen". Dat betekent dat je van iedere 9 een 10 moet maken om een punt te pakken (kan je nagaan als je een 7 of 8 scoort om dat weer goed te maken) terwijl de lagere score nog 3 punten kan sprokkelen per schot. Met andere woorden er moet ergens een wiskundige formule of curve zijn waardoor je "eerlijker" een handicap systeem kan maken. Wij hebben afgelopen jaar nadat men een aantal competitie rondes had gespeeld een gemiddelde uitgerekend en dat van 300 afgetrokken. Daarna 80% ervan als handicap toegewezen om de betere schutter ook iets voordeel te gunnen. Het feit dat iemand in het begin van de competitie enorm laag scoort en later veel beter hielp ons ook niet echt want dat betekende dat diegene een enorme handicap had terwijl zijn nveau inmiddels al veel hoger lag. Les voor ons om maximum handicap te gaan doen. Ook gaan we nu de hoogste 4 van maximaal 8 wedstrijden laten meetellen voor het gemiddelde per afstand waardoor het alweer iets beter moet werken. Mijn vraag is dus eigenlijk of er iets van een curve is te maken/bedenken waarbij je een handicap kan toepassen of dat de methode gemiddelde van 300 aftrekken en dat als handicap nemen de juiste is. Uiteraard geen verplichting voelen als je dit niet ziet zitten of geen tijd of wat dan ook hebt.

Ik ben je enorm dankbaar voor de hulp en tijd die je erin gestoken hebt om de FOC waarde formule beter te maken. Zoals gezegd ga ik daar later gelijk mee aan de slag!

Groeten,

Theo

 

[tvoorbij]

Hallo CSShunter,

Ik heb gekozen voor de aanpassing met "," en ".". De kleurvariatie heb ik laten zitten omdat dit verwarring kan meebrengen bij (hele) kleine afwijkingen van het ideaalbeeld bij schutters. Men kan nu zelf zijn conclusie trekken. Mocht je in de buurt van Soest zijn kun je altijd een keertje mee op de eerste dinsdag van de maand om een keertje te schieten onder begeleiding van ons. Als je dit leuk vind laat het maar weten.

 

[TimVN]

Hoi Theo,
Voor afronden kan je de Math.round(getal) methode gebruiken, die afrondt op het dichtstbij liggende gehele getal.

Wil je afronden met twee cijfers achter de komma, dan laat je de Math.round los op het getal vermenigvuldigd met 100, en deelt dat na afloop van het afronden weer terug door 100:
[JS]<script type="text/javascript">
// <=!=[=C=D=A=T=A=[
function CalculateFOC(Atext, Btext, form) {
var L = parseFloat(Atext);
var B = parseFloat(Btext);
var formule = (B / L-.5)*100;
form.Answer.value = Math.round(formule*100)/100;
}
function ClearForm2(form) {
form.input_L.value = "";
form.input_B.value = "";
form.Answer.value = "";
}
// ]=]=>
</script>[/JS]

• Test: afronden.htm
• In de test even een alert erbij gezet, die het onafgeronde getal laat zien.

Met vriendelijke groet,
CSShunter
__________
PS: Uit pure nieuwsgierigheid: wat betekent FOC in dit geval? Of staat ie er niet bij?

Waarom zou je niet gewoon de toFixed functie gebruiken?

getal = 122.2733332;
alert(getal.toFixed(2)); //Is 122.27

 

[tvoorbij]

Hallo Tim,

Ik heb geen idee, ik snap een beetje van scripts, kan ze invoegen, soms iets veranderen, maar dat is het. Deze functie kort het getal af na 2 cijfers achter de komma? Maar rond hij het getal ook af?
Wat is het voordeel t.o.v. van de andere optie?

Bedankt voor de input.

 

[csshunter]

Hoi-hoi,
Ja, ook toFixed() rondt af. Er zijn twee verschillen tussen Math.round() en toFixed(0):

• Bij Math.round() blijft de uitkomst een getal, bij toFixed() is de uitkomst een string geworden.
  - Als er daarna verdere getal-bewerkingen moeten komen, gaat dat niet 1-2-3.
• Een Math.round() geeft nauwkeuriger afrondingen:

[B]Math.round() vs toFixed()[/B]

getal is:                 122.234
Math.round(num*100)/100 = 122.23
num.toFixed(2)          = 122.23

getal is:                 122.235
Math.round(num*100)/100 = 122.24
num.toFixed(2)          = 122.23

getal is:                 122.236
Math.round(num*100)/100 = 122.24
num.toFixed(2)          = 122.24

"Try it yourself":
[JS]<script type="text/javascript">
function compare(num){
var output = "getal is: " + num
+ "<br />Math.round(num*100)/100 = " + Math.round(num*100)/100
+ "<br />num.toFixed(2) = " + num.toFixed(2);
document.write(output+'<br /><br />')
}
compare(122.234);
compare(122.235);
compare(122.236);
</script>[/JS]
Met vriendelijke groet,
CSShunter

 

[tvoorbij]

Zo leer ik er weer een hoop bij! Houden het dus bij jouw eerste script!
Nogmaals dank,

Theo