3

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>
Rob
  • 14,746
  • 28
  • 47
  • 65
Umesh Chandra Kahali
  • 71
  • 7
  • Do you run that page using `file` scheme? – Oriol Sep 28 '14 at 15:12
  • Yes I have runed but rendering not happening as i have mentioned. – Umesh Chandra Kahali Sep 28 '14 at 15:29
  • What output are you looking for? When I tested your code it seemed to work fine. From searching around though, only Firefox and Safari have support for rendering MathML properly and that's what I see on my computer testing your code on IE, Firefox and Chrome, only Firefox rendered it properly. – peterjb Sep 28 '14 at 16:50

1 Answers1

2

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.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390