The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Input - > Function - > Output
Mytro
post May 5 2017, 06:39 PM
Post #1





Group: Members
Posts: 3
Joined: 5-May 17
Member No.: 26,397



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 .

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 6 2017, 07:21 AM
Post #2


.
********

Group: WDG Moderators
Posts: 7,629
Joined: 10-August 06
Member No.: 7



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. unsure.gif Maybe the decimals are due to javascript's loose treatmeant of numbers, not sure. unsure.gif

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="">
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 6 2017, 08:33 AM
Post #3


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,662
Joined: 9-August 06
Member No.: 6



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...loating-points/

I once read the above article and sort of got a superficial understanding of it, but it was soon lost in the fogs. cool.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Mytro
post May 6 2017, 10:57 AM
Post #4





Group: Members
Posts: 3
Joined: 5-May 17
Member No.: 26,397



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. unsure.gif Maybe the decimals are due to javascript's loose treatmeant of numbers, not sure. unsure.gif

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="">



You are the MVP man !! Thanks a lot , love ya !
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 6 2017, 11:31 AM
Post #5


.
********

Group: WDG Moderators
Posts: 7,629
Joined: 10-August 06
Member No.: 7



From the article:

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

sad.gif

In general, maybe it's best to avoid javascript and use a server-side script instead.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 6 2017, 01:55 PM
Post #6


.
********

Group: WDG Moderators
Posts: 7,629
Joined: 10-August 06
Member No.: 7



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>

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 6 2017, 07:01 PM
Post #7


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,662
Joined: 9-August 06
Member No.: 6



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. unsure.gif Maybe the decimals are due to javascript's loose treatmeant of numbers, not sure. unsure.gif


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 wacko.gif ) 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Mytro
post May 7 2017, 04:40 AM
Post #8





Group: Members
Posts: 3
Joined: 5-May 17
Member No.: 26,397



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>


This post has been edited by Mytro: May 7 2017, 04:41 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 7 2017, 06:04 AM
Post #9


.
********

Group: WDG Moderators
Posts: 7,629
Joined: 10-August 06
Member No.: 7



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 wacko.gif )

They might do even worse things, if http://www.theregister.co.uk/2005/10/21/phantoms_and_rogues/ is to be believed. ohmy.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 7 2017, 06:21 AM
Post #10


.
********

Group: WDG Moderators
Posts: 7,629
Joined: 10-August 06
Member No.: 7



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 7 2017, 07:49 AM
Post #11


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,662
Joined: 9-August 06
Member No.: 6



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 wacko.gif )

They might do even worse things, if http://www.theregister.co.uk/2005/10/21/phantoms_and_rogues/ is to be believed. ohmy.gif


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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 21st September 2017 - 09:31 PM