Why does subtraction of float by float give unexpected result?

Question

I spent a good time to solve this problem on my system. Solved? I did, but at some point it’s working (the subtraction value) = -0.0 and I have to give . replace('-', '') to show the user a positive value and this causes a lapse of change that is noticeable. All this is happening due to subtracting 0.1 from 2.8 results in 2.6999999999997. In my code it is already used . toFixed(1) and still won’t, I’ve even used Math.round().

After all, what is the point of subtracting 0.1 from 2.8 and resulting in that?

@Edit

I warn people that they "parachuted down". This issue is not duplicated either has nothing to do with the topic indicated, because my question was something very specific that, just looking at the code in the jsfiddle left in the comments, is that a solution can come to your problem.

Answer 1

Have to convert toFixed(1) and in parseFloat() then. You will not be able to use the operator -= nor the += because of the problem with the float.

Run the snippet and click + over and over until 0:

var $menosPontoVelocidade = '#menos-ponto',
	$addPontoVelocidade = '#add-ponto',
	$velocidadeId = '#velocidade',
	$podeAdicionarHabilidades = true,
	$podeRetirarHabilidades = false,
	$podeRetirarHabilidadeVelocidade = false,
	$pontosDistribuirHabilidades = 2,
	$pontosDistribuirHabilidadesId = '#pontos-distribuir';


$(function($) {
	$($menosPontoVelocidade).on('click', function() {
			if ($podeRetirarHabilidades && $podeRetirarHabilidadeVelocidade) {
				retirar_pontos_habilidades($velocidadeId);
			}
		});
		
	$($addPontoVelocidade).on('click', function() {
		if ($podeAdicionarHabilidades) {
			adicionar_pontos_habilidades($velocidadeId);
		}
	});
	
	
	function retirar_pontos_habilidades($inputId) {
		$pontosDistribuirHabilidades += 0.1;
		$($pontosDistribuirHabilidadesId).text($pontosDistribuirHabilidades.toFixed(1));
		var $str = (parseFloat($($inputId).val()) - 0.1).toFixed(1);
		$($inputId).val($str);
	}

function adicionar_pontos_habilidades($inputId) {
		$pontosDistribuirHabilidades = parseFloat(($pontosDistribuirHabilidades-0.1).toFixed(1));
		$($pontosDistribuirHabilidadesId).text($pontosDistribuirHabilidades.toFixed(1));
		var $str = (parseFloat($($inputId).val()) + 0.1).toFixed(1);
		$($inputId).val($str);
	}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="menos-ponto"> - </span>
<input type="text" size="5" id="velocidade" disabled value="0.0" />
<span id="add-ponto"> + </span>
<p id="pontos-distribuir">2.0</p>