How can I pass the codemirror text area value to this compiler function ?

See more:

Javascript

IDE

CSS3

HTML5

editor

iam trying to create a code editor ,i have used code mirror for syntax hilghlighting and is linked in text area now the problem iam facing is iam unable to pass the text area data to the compiler function so that html,css and js get compiles and output get displayed in iframe.

i dont know how to pass the value from codemirror to compiler

here are codes

code mirror:

var htmleditor = CodeMirror.fromTextArea
   (document.getElementById('html'), {
    mode:"xml",
    theme:"dracula",
    lineNumbers:true
  });

compiler function:

function compile() {
  var html = document.getElementById("html");
  var css = document.getElementById("css");
  var js = document.getElementById("js");
  var code = document.getElementById("code").contentWindow.document;

  document.body.onkeyup = function() {
    code.open();
    code.writeln(
      html.value +
        "<style>" +
        css.value +
        "</style>" +
        "<script>" +
        js.value +
        "</script>"
    );
    code.close();
  };
}

compile();

please suggest a valid solution

What I have tried:

i have tried passing value by getelementbyid but doesnt seem to work for me