How to constantly store input value without submitting

Question

I'm trying to make something where you can input numbers into an input (or would a contenteditable div be better?) and it does some calculations to them and sets the content of another div as the answer. How can I make it so that the other div will update whenever the number changes? I would prefer to make it so that there isn't a submit button so the number instantly changes as you type it. I could probably achieve this by updating it every time there is a keystroke but the problem is storing the input data without pressing a submit button

Answer 1

First, please take some time to format your questions in the future. This is a difficult read.

Second please try and include all the information to show how far you have gotten.

Also I wasn't really clear what you are trying to do.

What you are looking for is called two way data binding, there are many different options for it, but it doesn't mean that's what you need. It seems like the following would be a good solution for you.

 function doSomeCalculationsAndDisplay(event){ const elem = document.getElementById('input'); console.log(elem.value); document.getElementById('result').innerText = 'Double value: ' + parseFloat(elem.value) * 2; }

 <input id="input" type="number" onKeyUp="doSomeCalculationsAndDisplay()" onChange="doSomeCalculationsAndDisplay()"> <div id="result"></div>

Answer 2

I always seem to figure it out on my own as soon as I make a post about it. It's not very complicated, the problem I had is that I was trying to get the innerHTML of an input which isn't possible, I needed to get its value instead.

To accomplish this all you need to do is make an input, div, and function that sets the div as the input document.getElementById('test1').innerHTML = document.getElementById('input1').value; and call this function onkeyup in the input.