Printable Version of Topic
Click here to view this topic in its original format
HTMLHelp Forums _ Client-side Scripting _ Input - > Function - > Output
Posted by: Mytro May 5 2017, 06:39 PM
Hello guys , i am new to using HTML , and i would like to create something that would allow a visitor on the website to input numbers and based on those numbers he would get a result .
For example :
The user inputs X , Y and Z .
Based on X , Y and Z i would have this :
If X is smaller than 54 then do 10*X*(if y=1;1,15; else if y=2;1,25 ; else 1,35)* (if z=1;2; else if z=2;3 ; else 4) ;
Else do 8*X*(if y=1;1,15; else if y=2;1,25 ; else 1,35)* (if z=1;2; else if z=2;3 ; else 4)
So bassicaly what i need is when a user inputs 40 , 1 , 2 he would get 10 * 40 * 1,15 * 3 = 1788.5 .
He will see only the result 1788,5 .
Posted by: Christian J May 6 2017, 07:21 AM
QUOTE(Mytro @ May 6 2017, 01:39 AM) 
Hello guys , i am new to using HTML , and i would like to create something that would allow a visitor on the website to input numbers and based on those numbers he would get a result .
That can be done with javascript or a server side script like PHP, which one to choose depends on how important the functionality is.
QUOTE
So bassicaly what i need is when a user inputs 40 , 1 , 2 he would get 10 * 40 * 1,15 * 3 = 1788.5 .
When I multiply 10 * 40 * 1,15 * 3 I get 1380 with my calculators, but 1379.9999999999998 with the below javascript in my browsers.
Maybe the decimals are due to javascript's loose treatmeant of numbers, not sure. CODE
<script type="text/javascript">
function calculate()
{
var x_field=document.getElementById('x_field').value;
var y_field=document.getElementById('y_field').value;
var z_field=document.getElementById('z_field').value;
var x_const=8;
if(x_field<54)
{
x_const=10;
}
var y_const=1.35;
if(y_field==1)
{
y_const=1.15;
}
else if(y_field==2)
{
y_const=1.25;
}
var z_const=4;
if(z_field==1)
{
z_const=2;
}
else if(z_field==2)
{
z_const=3;
}
document.getElementById('result_field').value=x_field * x_const * y_const * z_const;
}
</script>
<input type="text" id="x_field" value="40">
<input type="text" id="y_field" value="1">
<input type="text" id="z_field" value="2">
<hr>
<input type="button" value="Calculate" onclick="calculate();">
<input type="text" id="result_field" value="">
function calculate()
{
var x_field=document.getElementById('x_field').value;
var y_field=document.getElementById('y_field').value;
var z_field=document.getElementById('z_field').value;
var x_const=8;
if(x_field<54)
{
x_const=10;
}
var y_const=1.35;
if(y_field==1)
{
y_const=1.15;
}
else if(y_field==2)
{
y_const=1.25;
}
var z_const=4;
if(z_field==1)
{
z_const=2;
}
else if(z_field==2)
{
z_const=3;
}
document.getElementById('result_field').value=x_field * x_const * y_const * z_const;
}
</script>
<input type="text" id="x_field" value="40">
<input type="text" id="y_field" value="1">
<input type="text" id="z_field" value="2">
<hr>
<input type="button" value="Calculate" onclick="calculate();">
<input type="text" id="result_field" value="">
Posted by: pandy May 6 2017, 08:33 AM
I won't pretend I understand the concept of floating points, but it's because JS uses floating points that this happens.
https://modernweb.com/what-every-javascript-developer-should-know-about-floating-points/
I once read the above article and sort of got a superficial understanding of it, but it was soon lost in the fogs. 
Posted by: Mytro May 6 2017, 10:57 AM
QUOTE(Christian J @ May 6 2017, 07:21 AM)
QUOTE(Mytro @ May 6 2017, 01:39 AM)
Hello guys , i am new to using HTML , and i would like to create something that would allow a visitor on the website to input numbers and based on those numbers he would get a result .
That can be done with javascript or a server side script like PHP, which one to choose depends on how important the functionality is.
QUOTE
So bassicaly what i need is when a user inputs 40 , 1 , 2 he would get 10 * 40 * 1,15 * 3 = 1788.5 .
When I multiply 10 * 40 * 1,15 * 3 I get 1380 with my calculators, but 1379.9999999999998 with the below javascript in my browsers.
Maybe the decimals are due to javascript's loose treatmeant of numbers, not sure. CODE
<script type="text/javascript">
function calculate()
{
var x_field=document.getElementById('x_field').value;
var y_field=document.getElementById('y_field').value;
var z_field=document.getElementById('z_field').value;
var x_const=8;
if(x_field<54)
{
x_const=10;
}
var y_const=1.35;
if(y_field==1)
{
y_const=1.15;
}
else if(y_field==2)
{
y_const=1.25;
}
var z_const=4;
if(z_field==1)
{
z_const=2;
}
else if(z_field==2)
{
z_const=3;
}
document.getElementById('result_field').value=x_field * x_const * y_const * z_const;
}
</script>
<input type="text" id="x_field" value="40">
<input type="text" id="y_field" value="1">
<input type="text" id="z_field" value="2">
<hr>
<input type="button" value="Calculate" onclick="calculate();">
<input type="text" id="result_field" value="">
function calculate()
{
var x_field=document.getElementById('x_field').value;
var y_field=document.getElementById('y_field').value;
var z_field=document.getElementById('z_field').value;
var x_const=8;
if(x_field<54)
{
x_const=10;
}
var y_const=1.35;
if(y_field==1)
{
y_const=1.15;
}
else if(y_field==2)
{
y_const=1.25;
}
var z_const=4;
if(z_field==1)
{
z_const=2;
}
else if(z_field==2)
{
z_const=3;
}
document.getElementById('result_field').value=x_field * x_const * y_const * z_const;
}
</script>
<input type="text" id="x_field" value="40">
<input type="text" id="y_field" value="1">
<input type="text" id="z_field" value="2">
<hr>
<input type="button" value="Calculate" onclick="calculate();">
<input type="text" id="result_field" value="">
You are the MVP man !! Thanks a lot , love ya !
Posted by: Christian J May 6 2017, 11:31 AM
From https://modernweb.com/what-every-javascript-developer-should-know-about-floating-points/:
QUOTE
Among the poorer suggestions I’ve seen so far is storing everything as an integer number (not the type) for operations, and then formatting it for display. An example can be seen in Stripe – the amounts are stored in cents. This has a notable problem – not all currencies in the world are actually decimal (Mauritiana). Also, there are currencies in the world where there are no subunits (Japanese Yen) or non-100 subunits (Jordanian Dinars), or more than one subunit (Chinese Renminbi).
I don't think that's a poor suggestion at all (as long as you're not dealing with currencies).
QUOTE
libraries
In general, maybe it's best to avoid javascript and use a server-side script instead.
Posted by: Christian J May 6 2017, 01:55 PM
QUOTE(Mytro @ May 6 2017, 05:57 PM)
You are the MVP man !! Thanks a lot , love ya !
You're welcome, but note the decimal issues in the version above. Here's a version that might fix that:
CODE
<script type="text/javascript">
function calculate()
{
var x_field=document.getElementById('x_field').value;
var y_field=document.getElementById('y_field').value;
var z_field=document.getElementById('z_field').value;
var x_const=8;
if(x_field<54)
{
x_const=10;
}
var y_const=135;
if(y_field==1)
{
y_const=115;
}
else if(y_field==2)
{
y_const=125;
}
var z_const=4;
if(z_field==1)
{
z_const=2;
}
else if(z_field==2)
{
z_const=3;
}
document.getElementById('result_field').value=x_field * x_const * y_const * z_const / 100;
}
</script>
function calculate()
{
var x_field=document.getElementById('x_field').value;
var y_field=document.getElementById('y_field').value;
var z_field=document.getElementById('z_field').value;
var x_const=8;
if(x_field<54)
{
x_const=10;
}
var y_const=135;
if(y_field==1)
{
y_const=115;
}
else if(y_field==2)
{
y_const=125;
}
var z_const=4;
if(z_field==1)
{
z_const=2;
}
else if(z_field==2)
{
z_const=3;
}
document.getElementById('result_field').value=x_field * x_const * y_const * z_const / 100;
}
</script>
Posted by: pandy May 6 2017, 07:01 PM
QUOTE(Christian J @ May 6 2017, 02:21 PM)
When I multiply 10 * 40 * 1,15 * 3 I get 1380 with my calculators, but 1379.9999999999998 with the below javascript in my browsers.
Maybe the decimals are due to javascript's loose treatmeant of numbers, not sure. Yeah, but if you round that to a reasonable number of decimals you will get the correct answer. I think this most often isn't such a big problem. I hope my bank doesn't use floating points (even if I sometimes think they do, very floating
) but otherwise, for most practical uses, maybe with some small additional measures like limiting the number of decimals. For pure math, maybe not so good though.
Posted by: Mytro May 7 2017, 04:40 AM
Based on your suggestion i got this code witch works lovely , but i would also like to add some restrictions for the input for x_field -> Numbers , y_field ->Numbers , z_field -> numbers from 1 to 6 , t_field -> numbers for 1 to 4 , p_field_numbers .
If there is inserted a value outside of the range , get an error .
CODE
<script language="JavaScript">
function showInput() {
document.getElementById('display1').innerHTML =
document.getElementById("x_field").value;
document.getElementById('display2').innerHTML =
document.getElementById("z_field").value;
document.getElementById('display3').innerHTML =
document.getElementById("y_field").value;
document.getElementById('display4').innerHTML =
document.getElementById("t_field").value;
document.getElementById('display5').innerHTML =
document.getElementById("p_field").value;
document.getElementById('display6').innerHTML =
document.getElementById("result_field").value;
}
function ShowDiv() {
document.getElementById("myDiv").style.display = "";
}
</script>
<script type="text/javascript">
function calculate()
{
var x_field=document.getElementById('x_field').value;
var y_field=document.getElementById('y_field').value;
var z_field=document.getElementById('z_field').value;
var t_field=document.getElementById('t_field').value;
var p_field=document.getElementById('p_field').value;
var x_const=10;
if(x_field<54)
{
x_const=12;
}
var y_const=1.35;
if(y_field==1)
{
y_const=1.15;
}
else if(y_field==2)
{
y_const=1.25;
}
var z_const=1;
if(z_field==1)
{
z_const=1.2;
}
else if(z_field==2)
{
z_const=2.3;
}
else if(z_field==3)
{
z_const=2.3;
}
else if(z_field==4)
{
z_const=2.3;
}
else if(z_field==5)
{
z_const=1.3;
}
else if(z_field==6)
{
z_const=1.15;
}
var t_const=1;
if(t_field==1)
{
t_const=0.4;
}
else if(t_field==2)
{
t_const=0.7
}
var p_const=300;
if(p_field==1)
{
p_const=100;
}
else if(p_field==2)
{
p_const=180
}
else if(p_field==3)
{
p_const=250
}
document.getElementById('result_field').value=x_field * x_const * y_const * z_const * t_const + p_const;
}
</script>
Numar de Apartamente : <input type="text" name="x" id="x_field" value="0"><br></br>
Numar de Scari : <input type="text" id="y_field" value="0"><br></br>
Sector : <input type="text" id="z_field" value="0"><br></br>
Servicii Solicitate : <input type="text" id="t_field" value="0"><br></br>
Numar Ore Casierie : <input type="text" id="p_field" value="0">
<hr>
<input type="button" value="Calculeaza Tarif" onclick="calculate();showInput();ShowDiv()"><br></br>
<span id="result_field"></span>
<div id="myDiv" style="display:none;">Tariful pentru asociatia dumneavoastra de <span id='display1'></span> de apartamente si
<span id='display2'></span> scari, localizata in sectorul
<span id='display3'></span>, pentru pachetul de administrare numarul :
<span id='display4'></span> si un numar de
<span id='display5'></span> ore de casierie saptamanal este de :<b><span style="color:rgb(255,0,0)"> <span id='display6'></span> lei. </b></span>
</div>
function showInput() {
document.getElementById('display1').innerHTML =
document.getElementById("x_field").value;
document.getElementById('display2').innerHTML =
document.getElementById("z_field").value;
document.getElementById('display3').innerHTML =
document.getElementById("y_field").value;
document.getElementById('display4').innerHTML =
document.getElementById("t_field").value;
document.getElementById('display5').innerHTML =
document.getElementById("p_field").value;
document.getElementById('display6').innerHTML =
document.getElementById("result_field").value;
}
function ShowDiv() {
document.getElementById("myDiv").style.display = "";
}
</script>
<script type="text/javascript">
function calculate()
{
var x_field=document.getElementById('x_field').value;
var y_field=document.getElementById('y_field').value;
var z_field=document.getElementById('z_field').value;
var t_field=document.getElementById('t_field').value;
var p_field=document.getElementById('p_field').value;
var x_const=10;
if(x_field<54)
{
x_const=12;
}
var y_const=1.35;
if(y_field==1)
{
y_const=1.15;
}
else if(y_field==2)
{
y_const=1.25;
}
var z_const=1;
if(z_field==1)
{
z_const=1.2;
}
else if(z_field==2)
{
z_const=2.3;
}
else if(z_field==3)
{
z_const=2.3;
}
else if(z_field==4)
{
z_const=2.3;
}
else if(z_field==5)
{
z_const=1.3;
}
else if(z_field==6)
{
z_const=1.15;
}
var t_const=1;
if(t_field==1)
{
t_const=0.4;
}
else if(t_field==2)
{
t_const=0.7
}
var p_const=300;
if(p_field==1)
{
p_const=100;
}
else if(p_field==2)
{
p_const=180
}
else if(p_field==3)
{
p_const=250
}
document.getElementById('result_field').value=x_field * x_const * y_const * z_const * t_const + p_const;
}
</script>
Numar de Apartamente : <input type="text" name="x" id="x_field" value="0"><br></br>
Numar de Scari : <input type="text" id="y_field" value="0"><br></br>
Sector : <input type="text" id="z_field" value="0"><br></br>
Servicii Solicitate : <input type="text" id="t_field" value="0"><br></br>
Numar Ore Casierie : <input type="text" id="p_field" value="0">
<hr>
<input type="button" value="Calculeaza Tarif" onclick="calculate();showInput();ShowDiv()"><br></br>
<span id="result_field"></span>
<div id="myDiv" style="display:none;">Tariful pentru asociatia dumneavoastra de <span id='display1'></span> de apartamente si
<span id='display2'></span> scari, localizata in sectorul
<span id='display3'></span>, pentru pachetul de administrare numarul :
<span id='display4'></span> si un numar de
<span id='display5'></span> ore de casierie saptamanal este de :<b><span style="color:rgb(255,0,0)"> <span id='display6'></span> lei. </b></span>
</div>
Posted by: Christian J May 7 2017, 06:04 AM
QUOTE(pandy @ May 7 2017, 02:01 AM)
Yeah, but if you round that to a reasonable number of decimals you will get the correct answer.
In this case yes, but are the errors always like that? And how do you know the number of decimals to round to?
QUOTE
I hope my bank doesn't use floating points (even if I sometimes think they do, very floating )
) They might do even worse things, if http://www.theregister.co.uk/2005/10/21/phantoms_and_rogues/ is to be believed.
Posted by: Christian J May 7 2017, 06:21 AM
QUOTE(Mytro @ May 7 2017, 11:40 AM)
i would also like to add some restrictions for the input for x_field -> Numbers , y_field ->Numbers , z_field -> numbers from 1 to 6 , t_field -> numbers for 1 to 4 , p_field_numbers .
If there is inserted a value outside of the range , get an error .
That's more complicated. Do all the numbers have to be positive integers, or is the user allowed to enter decimals in any of the fields?
The X, Y and P fields might be done with HTML5 "number" or "range" INPUT fields. The Z and T fields might use radio buttons or a SELECT menu. It's also possible to use javascript for all the checking, but that takes some time to write.
Note that if you want any of this to be stored in a database or emailed somewhere, all the calculations and restrictions must be done with a server-side script. Client-side javascript is not reliable for that.
Posted by: pandy May 7 2017, 07:49 AM
QUOTE(Christian J @ May 7 2017, 01:04 PM)
QUOTE(pandy @ May 7 2017, 02:01 AM)
Yeah, but if you round that to a reasonable number of decimals you will get the correct answer.
In this case yes, but are the errors always like that? And how do you know the number of decimals to round to?
I don't know, but since the error is always very small, hence many decimals, it ought to work. In this case, since the input has two decimals, maybe it's reasonable that the result has the same number?
QUOTE
QUOTE
I hope my bank doesn't use floating points (even if I sometimes think they do, very floating )
) They might do even worse things, if http://www.theregister.co.uk/2005/10/21/phantoms_and_rogues/ is to be believed.
I didn't understand. Was it the computer system that did it or bank employees? If it was a computer error, did the money just evaporate, they weren't transferred anywhere?
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)