MathML not showing and showing below textbox

I have a page that contains a textbox. The user enters mathML inside it, and when the user clicks the output button, the MathML should be displayed and displayed below the textbox. But no rendering happens. Textarea can contain more than one math code for rendering.

Below is the code I 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>

      

+3


source to share


1 answer


From MathJax, you should not render the page whenever it has been modified by client scripts. To request such processing, add the following after the code that performs the change, here at the end of the function myFunction

:

MathJax.Hub.Typeset();

      

It is more economical to use code that forces only one element to be processed:



MathJax.Hub.Typeset("demo");

      

See the MathJax documentation, page Change math on page .

+2


source







All Articles