Changing Tex String in HTML with JavaScript

Question

I use this command

<div id="formulaOut"><script type="math/tex">z = \sqrt{x^2+y^2}</script></div>

to show a line in Tex format. Now I want to change the content of the line (JavaScript), but I still want to interpret it in the Tex format. When I put a button, I execute the following function:

function Calculation() {
    document.getElementById("formulaOut").innerHTML= 'x^2+y^2';
}

But like this, the String is not anymore interpreted as Tex. Any suggestion how I can solve this problem?

I'm guessing you're using a plugin that parses based on Knuth's Tex, that runs on pageload, and adding different markup later with javascript doesn't work as the plugin won't run on that markup. — adeneo, Jun 17 '13 at 12:11

score 1 · Answer 1 · answered Jun 18 '13 at 19:50

Try using

function Calculation() {
  var jax = MathJax.Hub.getAllJaxFor("formulaOut")[0];
  MathJax.Hub.Queue("Text",jax,"x^2+y^2");
}

instead.

The problem is that you have:

Replaced the <script type="math/tex"> that identifies the mathematics for MathJax by the string x^2+y^2 that does not identify any mathematics to be typeset, and
You did not tell MathJax that it needs to re-typeset the contents of the div once the new math is there.

The code I provide looks up the math element created by MathJax and tells it that it should change its TeX code to the new string (this automatically re-typesets it).

Changing Tex String in HTML with JavaScript

1 Answers1