4

Tenho 2 campos no meu site em que em um deles tenho que introduzir um número à medida que vou escrevendo e outro que tem de receber esse valor adicionando +3.

Usei a seguinte forma:

<input type="text" name="ciclo" id="ciclo" maxlength="4" onkeypress="tenta()">
<input type="text" readonly id="lol">

e em javascript:

function tenta()
{
    var x = document.getElementById('ciclo');
    document.getElementById('lol').innerHTML = x + 3;
}

Alguém sabe porque não funciona?

3 Respostas 3

3

Não estavas longe, faltam-te duas coisas.

Quando queres aceder ao valor de um input, e mesmo quando queres mudar o seu valor tens de usar a propriedade .value. No teu primeiro input deste ao x o próprio elemento, e não o seu valor. No segundo estás a tentar re-escrever o .innerHTML que o input não tem. Usa .value nos dois.

A outra coisa que falhou é porque o .value retorna uma String, ou seja um texto. Assim repara que "10" não é o mesmo que 10. O primeiro é texto (String), o segundo um número (Number). Para converter podes usar o parseInt(numero, radix) ou o parseFloat(numero).

Com essas mudanças já ia funcionar. Porém sugiro usares o onkeyup. O keypress é disparado antes de o input receber o novo numero, e assim (como no link em cima) ele vai calcular antes do novo numero lá estar. Muda para keyup para ele fazer a conta já com o valor certo.

Portanto para isso funcionar podes usar assim:

function tenta() {
    var x = document.getElementById('ciclo').value;
    document.getElementById('lol').value = parseFloat(x) + 3;
}
<input type="text" name="ciclo" id="ciclo" maxlength="4" onkeyup="tenta()">
<input type="text" readonly id="lol">

jsFiddle: https://jsfiddle.net/tnfn7xv0/1/

2

É necessário usar Math para fazer este cálculo, senão o número 3 será apenas adicionado à frente do value que estamos a obter da primeira div para fazer o seu output para uma segunda div.
Ou seja, se adicionássemos o número 2 no input, o seu resultado na segunda div que é o output, apareceria assim desta seguinte forma - 23 e não o valor correto que supostamente seria - 5.

Neste caso podemos utilizar o Math.round(), que basicamente o que ele faz é - "devolver o valor de um número arredondado para o número inteiro mais próximo". Assim se colocarmos valores com pontos ou vírgulas, ela automaticamente faz o arredondamento.

var inputInserido = document.getElementById('userInput');
var resuldado = document.getElementById('preview');

inputInserido.onkeyup = function(){
    resuldado.innerHTML = Math.round(inputInserido.value) + 3;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
<input type="number" id="userInput" />
<div id="preview"></div>

1
  • 1
    Acho que Math.round() não é semanticamente correto. Ele funciona porque converte a string em numero, da mesma maneira que typeof ("5" * 1) dá um "number". Os métodos parseInt ou parseFloat é o que é semântico para converter strings em numeros.
    – Sergio
    Commented 10/04/2016 às 8:58
1

Recomendo a função onkeyup que é executada depois que você solta o botão de cima do input. Na linha var x = document.getElementById('ciclo') você não pega o valor do input e sim o Objeto, para pegar o valor use a propriedade value.

function tenta() {
    var x = document.getElementById('ciclo').value;
    //parseInt converte a string do input para inteiro
    document.getElementById('lol').value = parseInt(x) + 3;
}
<input type="text" name="ciclo" id="ciclo" maxlength="4" onkeyup="tenta()">
<input type="text" readonly id="lol">

2
  • muito bom Igor +1 :)
    – Chun
    Commented 10/04/2016 às 2:38
  • 1
    Obrigado @Chun a sua também está muito bem explicado!
    – Igor Mello
    Commented 10/04/2016 às 2:39

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .