MathML is not rendered and displayed below the textarea

I have a page which contains a textarea. The user will input mathML inside it and when the user clicks on the output button, MathML should be rendered and displayed below the textarea. But rendering is not happening. Textarea may contain more than one mathml codes for rendering.

Below is the code I have used.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script type="text/javascript" src="file:/P:/MathJax/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
</head>
<body>
        <h3>MathML Previewer</h3>

        Paste your MathML:<br>
            <textarea id="myMath" style="resize: none; height:250px; width:850px">
        </textarea>

            <button type="button" onclick="myclear()">Reset</button>
            <p>Click the button to get output</p>
            <button type="button" onclick="myFunction()">Output</button>
            <div id="demo">
            </div>

            </div>
            <script>
                function myFunction() {

                var x = document.getElementById("myMath").value;
                document.getElementById("demo").innerHTML = x;
                }
            </script>
            <script>
                function myclear() {
                var x = document.getElementById("myMath").value =' ';
                //document.getElementById("demo").innerHTML = x;

                }
            </script>

    </body>
</html>

Solution

MathJax should not be expected to process the page whenever it has been changed with client-side scripting. To request for such processing, add the following after the code that performs a change, here at the end of function myFunction:

MathJax.Hub.Typeset();

More economically, use code that causes a single element only to be processed:

MathJax.Hub.Typeset("demo");

See the MathJax documentation, page Modifying Math on the Page.