Isso está acontecendo porque você não está passando valores numéricos, mas sim string
s que, em alguns casos (dado o comportamento coercitivo do JavaScript) serão convertidos, mas em outros, não.
Desse modo, como a propriedade value
sempre retorna uma string
, você deve, antes de utilizá-los, convertê-los para o tipo adequado:
function sortear(){
var min = parseInt(document.getElementById("minimo").value, 10);
var max = parseInt(document.getElementById("maximo").value, 10);
var sorteio = Math.floor(Math.random() * (max - min) + min);
document.getElementById("resultado").innerHTML = sorteio;
}
<div>
<p>Insira o valor mínimo: <input type="number" name="minimo" id="minimo"></p>
</div>
<div>
<p>Insira o valor máximo: <input type="number" name="maximo" id="maximo"></p>
</div>
<div>
<button onclick="sortear()">Sortear</button>
</div>
<div>
<h1 id="resultado"></h1>
</div>
No caso, utilizamos o parseInt
para realizar a conversão de string
para number
. Outras opções para essa conversão são o construtor Number
ou parseFloat
. Você também pode utilizar o operador unário +
, mas eu pessoalmente não gosto dessa última opção.
Agora explicarei de fato o que estava acontecendo quando você utilizava os tipos incorretos. Primeiramente, precisamos analisar a expressão a ser interpretada pelo JavaScript:
Math.floor(Math.random() * (max - min) + min);
Supondo que max
seja "15"
e min
seja "5"
(note que ambos são strings), podemos assumir o seguinte:
Math.floor(Math.random() * ("15" - "5") + "5");
Primeiro, o JavaScript avaliará a subtração dentro dos parênteses, que dão preferência para essa avaliação. Como o operador -
, no JavaScript, significa exclusivamente a subtração aritmética, os dois operandos são corretamente convertidos para o tipo number
antes do operador realizar a subtração.
Uma vez que temos o resultado da subtração anterior (10
— note que agora se trata de um número), efetuaremos a multiplicação com o valor retornado por Math.random
, que também é um número.
Por fim, o produto será concatenado (+
) com o valor de min
(que era para ser uma soma). Isso acontece porque, no JavaScript, o operador binário +
pode ter significados diferentes dependendo do tipo de seus operandos. Eu explico melhor sobre isso nesta pergunta: Como funciona o operador “+” em JavaScript?.
Então, mantendo os valores max
e min
como string, teremos a seguinte avaliação passo a passo:
Math.floor(Math.random() * ("15" - "5") + "5");
Math.floor(Math.random() * 10 + "5");
Math.floor(0.8879528248948558 * 10 + "5");
— assumindo que Math.random
retorne 0.8879528248948558
.
Math.floor(8.879528248948558 + "5");
Math.floor("8.8795282489485585");
— Note que o "5"
foi concatenado ao final do produto.
8
— Math.floor
, de acordo com a especificação, converte o tipo para number
automaticamente.
Portanto, como você pode perceber, essa coerção de tipos automática do JavaScript é deveras confusa e cheia de sutilezas que podem afetar a robustez do código. Portanto, é sempre ideal que você converta os tipos explicitamente para o valor numérico se quiser trabalhar com operações matemáticas.