How to project the value that is inserted into an input into the content of another element?

Question

I am trying to reproduce in real time what the person typed in a textarea for a paragraph, an example would be the very system of questions and answers of this site, I type something and automatically is reproduced below.

i tried several ways only when I type something ex: t', and type another key the JV it deletes t' and subtitui by the key I typed.

I’m doing the site with JV, HTML and CSS to know more about the JV only I got caught up in it!

<script>

    function tecla(){
        let paragrafo = document.getElementById('p')
        paragrafo.innerHTML = event.keyCode;
        console.log(event.keyCode);
    }
</script>

Answer 1

The problem occurs due to the current operator used..

First of all I suggest you see the Allocation operators, because you are "assigning" the value and not "adding up"

1. Assigning: in other words, you replace one value with another x = y (that is, if X is equal to 2 and Y is equal to 1, the value of X becomes 1)

var x = 2, y = 1;
console.log(x = y); // 1

2. Adding: when we speak of numbers, here the value is summed x += y (X equal to 2 and Y equal to 1, the value of X becomes 3)

var x = 2, y = 1;
console.log(x += y); // 3

How the above problem involves String, that is, Text this operator passes to invite them, thus represented in javascript

var texto1 = "a", texto2 = "b", texto3 = "c";

var resultado = texto1 + texto2 + texto3;
console.log(resultado); // abc

^{note that the texts are stored in 3 different variables!}

---

Therefore, to add without replacing the previous value/text just use the operator +=

var textarea = document.querySelector('textarea');
textarea.value += "21"; // value pois trata-se de uma entrada, diferente de um parágrafo <p>texto</p> (que entra o innerText())

<textarea>Minha idade é: </textarea>

see that the predefined text "My age is: " is maintained after adding the "21" and not replaced!

---

I made a small code where brings a possible solution based on your question!

Because it is missing the criteria of How to create a Minimum, Complete and Verifiable example it is extremely important to deal with this, to formulate a good question.

const textarea = document.querySelector('textarea'); // referencia da textarea
const p = document.querySelector('p'); // referencia do parágrafo

// dispara o evento ao ser pressionada as teclas
textarea.addEventListener('keypress', event => {
  console.log(event.key); // imprime a letra, simbolo e/ou número correspondente a tecla pressionada dentro do textarea.
  p.innerText += event.key;
});

<textarea></textarea>
<p></p>