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