Update div when writing text does not work as expected

My goal is to write content in a textarea and display exactly what I am writing without have to refresh the page each letter that I type shows immediately well it is not working for some reason.

HTML:

 <textarea id="Q&A" name="txtarea" rows="4" cols="50"></textarea>
 <div id="out"></div>

Js:

function generate() {
  var reader = new commonmark.Parser();
  var writer = new commonmark.HtmlRenderer();
  var parsed = reader.parse(text);
  text = writer.render();
  document.getElementById("out").innerHTML = text
}

document.getElementById("Q&A").addEventListener("input", function () {
    generate(this.value);
});

When I try to update the div with the id of out to what I am typing using JavaScript, it does not work.

I don't know what the commonmark.Parser() does in your code. But the issue i see is, When you are calling the generate method, you are passing the value of the input field. But in your generate method signature, you don't have a parameter to accept that.

Add a parameter to your generate() method to accept the value passed in.

function generate(text) {
   //do something else on text with your commonmark
   document.getElementById("out").innerHTML = text;
}

Here is a working sample.

and you forgot to pass the argument parsed to the render function:

You had: text = writer.render(); I changed it to text = writer.render(parsed);