Javascript send an account to an element

Question

I have 2 fields on my site where in one of them I have to enter a number as I write and another that has to receive this value adding +3.

I used the following form:

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

and in javascript:

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

Does anyone know why it doesn’t work?

Answer 1

You weren’t far away, you’re missing two things.

When you want to access the value of a input, and even when you want to change its value you have to use the property .value. In your first input you gave to x the element itself, not its value. In the second you are trying to rewrite the .innerHTML that the input no. Uses .value both of us.

The other thing that failed is because the .value returns a String, or a text. So you notice that "10" is not the same as 10. The first is text (String), the second a number (Number). To convert you can use the parseInt(numero, radix) or the parseFloat(numero).

With these changes would have worked by now. But I suggest you use the onkeyup. The keypress is fired before of the input receiving the new number, and so (as in the link above) it will calculate before the new number is there. Changes to keyup for him to make the account already with the right value.

So for it to work you can use it like this:

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/

Answer 2

It is necessary to use Math to make this calculation, other than the number 3 will just be added to the front of the value we are getting from the first div to make his output to a second div.
That is, if we add the number 2 in the input, its result in the second div which is the output, would thus appear as follows - 23 and not the correct value that was supposed to be - 5.

In this case we can use the Math.round(), that basically what it does is - "return the value of a rounded number to the nearest integer". So if we put values with dots or commas, it automatically makes rounding.

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>

Answer 3

I recommend the function onkeyup which is executed after you release the top button of the input. On the line var x = Document.getElementById('cycle') you do not take the value of the input but the Object, to take the value use the property 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">