Real time HTML tester Here is a simple webpage that I wrote to test HTML code in real time as typed, what are some ways that I can Improve my code? part of the code is reused from a previous project, I believe that it may now be causing problems. I am still learning about CCS and in places i used both the HTML width tag and the CCS property to set the width of the item. 

When searching stackoverflow I found Quite a few questions about how HTML code can be loaded into an iframe, this seems to be a common problem, Am I properly loading a HTML string into an iframe?

&lt;!DOCTYPE html&gt;
&lt;title&gt;Live HTML tester&lt;/title&gt;
&lt;h1 id="Pagetitle"&gt;Live HTML tester&lt;/h1&gt;
&lt;html&gt;
    &lt;head&gt;
    &lt;/head&gt;

&lt;style&gt;
h1
{
    text-align: center;
}
textarea
{
    vertical-align: top;
    width:100%;

}
iframe
{
    vertical-align: bottom;
    width:100%;
}
&lt;/style&gt;
&lt;body&gt;
    &lt;input id="browseOpen" type="file" accept=".html"/&gt;
    &lt;textarea 
        rows="20" 
        id="HTMLdata"
        placeholder="Enter HTML code"
        onKeyPress="edValueKeyPress() 
        "onKeyUp="edValueKeyPress()"&gt;
    &lt;/textarea&gt;
    &lt;iframe id="test_iframe" src="about:blank" width="100%" height=400&gt;&lt;/iframe&gt;
&lt;/body&gt;

&lt;script language="javascript"&gt;
    var fileInput = document.getElementById("browseOpen");
    fileInput.onchange = function() {
        var fr = new FileReader();
        fr.onloadend = function() {
            var result = this.result;
            html_string = result;
            //alert(result);
            var TheText = document.getElementById("HTMLdata");
            TheText.innerText=result;
            edValueKeyPress();
        };
        fr.readAsBinaryString(this.files[0]);
    };
    function edValueKeyPress(){
        var edValue = document.getElementById("HTMLdata");
        var html_string = edValue.value;

        var iframe = document.getElementById('test_iframe');

        var iframedoc = iframe.document;
            if (iframe.contentDocument)
                iframedoc = iframe.contentDocument;
            else if (iframe.contentWindow)
                iframedoc = iframe.contentWindow.document;

         if (iframedoc){
             iframedoc.open();
             iframedoc.writeln(html_string);
             iframedoc.close();
         } else {
            alert('Cannot inject dynamic contents into iframe.');
         }

    }

&lt;/script&gt;
&lt;/html&gt;


Here is where the page is being hosted LiveHTML.html
Try rewriting your script with an addEventListener instead of an onChange method.

However, keep in mind that an addEventListener is not compatible with IE lower then IE9. So don't use this yet in live sites.


https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener?redirectlocale=en-US&amp;redirectslug=DOM%2FEventTarget.addEventListener
http://coding.smashingmagazine.com/2013/11/12/an-introduction-to-dom-events/