Increment and decrement a numeric type input field by code

#1 · January 11, 2022, 11:23 am

I write this situation and its solution because it could be useful to someone else.

Trying to increment and decrement a numeric type input field (with 'step' set to 0.1) with decimal values (for example +0.1 or -0.1) by code, strange behaviors occur. Sometimes the result of the increase or decrease is not exactly as expected. You can try this with the attached sample app. In the example there is also the solution to the problem. There are a numeric input and four buttons to increase or decrease the value in the input. Two buttons (with 'ko' label) present the problem and two (with 'ok' label) the solution. If you try several times to increase or decrease the value using the 'ko' buttons, the problem will arise.

I hope it is useful.

Rocco

Uploaded files:

You need to login to have access to uploads.

luishp, CDY@44 and fkapnist have reacted to this post.

#2 · January 11, 2022, 3:12 pm

the numeric input object also has a property to solve your problem but you left it blank:

max-length: put here a number to limit the maximum characters allowed on the Numeric Input.

#3 · January 11, 2022, 3:24 pm

the numeric input object also has a property to solve your problem but you left it blank:

max-length: put here a number to limit the maximum characters allowed on the Numeric Input.

Quote from fkapnist on January 11, 2022, 3:12 pm

the numeric input object also has a property to solve your problem but you left it blank:

max-length: put here a number to limit the maximum characters allowed on the Numeric Input.

Actually, the max-length property does NOT work... your solution does.

roccocogliano has reacted to this post.

#4 · January 11, 2022, 5:27 pm

Quote from fkapnist on January 11, 2022, 3:24 pm

the numeric input object also has a property to solve your problem but you left it blank:

max-length: put here a number to limit the maximum characters allowed on the Numeric Input.

Quote from fkapnist on January 11, 2022, 3:12 pm

the numeric input object also has a property to solve your problem but you left it blank:

max-length: put here a number to limit the maximum characters allowed on the Numeric Input.

Actually, the max-length property does NOT work... your solution does.

Hi @fkapnist, I don't think it is a problem of maximum length but of wrong calculation.
I don't know why but the calculation (incremental or decremental) is in some cases incorrect. For example 0.2 + 0.1 gives as a result 0.30000000000000004 and, even worse, 0.7 + 0.1 gives as a result 0.7999999999999999. In the first example the maxlenght could solve it but in the second it certainly does not.

Greetings

Rocco

fkapnist has reacted to this post.

#5 · January 11, 2022, 11:37 pm

@roccocogliano

Instead of SetVar, try and use Math command e.g. ...

Math "[numero]+0.1" 1 [numero]

luishp, fkapnist and roccocogliano have reacted to this post.

#6 · January 12, 2022, 12:47 am

Hi,

Remember, to avoid a lot of decimals (e.g. 0.7999999999) you can use .toFixed(1) function.

Here you go 2 simple ways to work with floats using strings or numbers.

Thanks for sharing @roccocogliano

var num1 = 0.7;
var num2 = 0.1;
console.log((num1 + num2).toFixed(1));
// 0.8

var num1 = '1.4';
var num2 = '0.6';
console.log((parseFloat(num1) + parseFloat(num2)).toFixed(1));
// 2.0

fkapnist, javadrajabihakami and roccocogliano have reacted to this post.

#7 · January 12, 2022, 10:37 am

Quote from Gaev on January 11, 2022, 11:37 pm

@roccocogliano

Instead of SetVar, try and use Math command e.g. ...

Math "[numero]+0.1" 1 [numero]

Math "[numero]+0.1" 1 [numero]
Math "[numero]+0.1" 1 [numero]

This is the perfect solution.

Thanks @gaev

luishp and fkapnist have reacted to this post.

Increment and decrement a numeric type input field by code - Forum

Increment and decrement a numeric type input field by code