DOM manipulation with mathjax

Question

I'm trying to make a button that when pressed at least once, a math symbol/equation made from MathJax appears in a designated spot on my webpage. So far, this is what I have

//in JS
//when button is pressed, then x^2 appears
document.getElementById("button").addEventListener("click", function() {
  MathJax.HTML.addElement(document.body, "div", {
    id: "sqrt"
  }, ["$$x^2$$"]);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.3/MathJax.js"></script>
<!--Press button for x^2 to appear-->
<button id="button">Press</button>
<!--x^2 appears here-->
<p id="sqrt"></p>

but every time I press the button, I don't get x^2, I literally get a string. I know the MathJax.HTML.addElement works when it's outside the event listener, but I'm trying to do this with a button. Any ideas would be helpful.

Thank you

Edit: My question is different because it's asking why, when I submit a button, it's showing my the literal string $$x^2$$ instead of the symbol. I know the document on the MathJax page mentions something about it, but I'm a complete novice and don't understand it. I was hoping someone could help me.

Link to a repl.it showing the problem: https://mathjax-experiement--dolphinsupreme.repl.co

Edit 2: The x^2 symbol isn't showing up on the repl.it link, I'm not sure why because it's showing up on repl.it built-in page.

Possible duplicate of [How to recall or restart MathJax?](https://stackoverflow.com/questions/5200545/how-to-recall-or-restart-mathjax) — Andreas, Mar 27 '18 at 11:32
I did read that. That's where I learned about the MathJax.HTML part, but I'm totally new to this and I don't understand the content on the website well enough to do what I want to do, which is to have a button show $$x^2$$ instead of outputting the string. Would it be better if I show my results with a link to repl.it? — dolphin supreme, Mar 28 '18 at 12:26

scraaappy · Answer 1 · 2018-03-31T20:18:44.510

Once you have loaded mathJax, you need either a configuration script, or specify options through url: eg ?config=TeX-AMS-MML_HTMLorMML&dummy=.js see Loading and Configuring MathJax

MathJax works as a preprocessor, and renders mathematical expressions in the DOM where it's needed. Everything else that contains mathematical expressions which comes from variables in your script, json or whatever must be interpreted (typesetted) to be properly rendered, once it's appended to the DOM. MathJax.Hub.Typeset()

Outside the event listener, if MathJax.HTML.addElement(); is immediatly invoked when the DOM is loading, it will first add the element to the DOM, then is processed with the whole document (or the nodes you have specified in your configuration), that's why it works.

Later when you click a button to display a mathematical expression from a variable, you have to invoke Typeset() again:

MathJax.Hub.Typeset(".sqrt");

Indeed, addElement(), won't render your element:

addElement(parent, type[, attributes[, content]]) Creates a DOM element and appends it to the parent node provided. It is equivalent to parent.appendChild(MathJax.HTML.Element(type,attributes,content))

However, mathjax works asynchronously, as rendering may take a while (otherwise, browser may freeze until it's done), so what will happen if you click while mathjax engine is still occupied to render something elsewhere in your page? To avoid your call to be forgotten, it is safer to enqueue your desired typeset in the mathjax queue:

MathJax.Hub.Queue(["Typeset",MathJax.Hub,".sqrt"]);

If the queue is empty, this will throw immediatly, if not, it will insured you that your action will be thrown at the end of the process. Everything is exposed here.

Side Note : In your snippet, you do not configure mathjax properly. You also add an element with always the same id, which is not valid. If you just want to replace the content of your div, don't use addElement. Otherwise you should work with class and create unique ids. See the snippet for details.

// this works as I explain above (don't forget to escape backslash in your string)
//console.log("\\"); as a reminder!
MathJax.HTML.addElement(document.body, "div", {class: "sqrt",id:"sqrt_"+length},["\\begin{equation}x+1\\over\\sqrt{1-x^2}\\end{equation}"]);
    
document.getElementById("button1").addEventListener("click", function() {
    var length = document.getElementsByClassName(".sqrt").length;
    var expression = document.getElementById("expression").value || `$$x^2$$`;
    
    MathJax.HTML.addElement(document.body, "div", {class: "sqrt",id:"sqrt_"+length},[expression]);
    MathJax.Hub.Queue(["Typeset",MathJax.Hub,"#sqrt_"+length]);
});

document.getElementById("button2").addEventListener("click", function() {
  var expression = document.getElementById("expression").value || `$$x^2$$`;
  document.getElementsByClassName("sqrt")[0].innerHTML = expression;
  MathJax.Hub.Queue(["Typeset",MathJax.Hub,".sqrt"]);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.3/MathJax.js?config=TeX-AMS-MML_HTMLorMML&dummy=.js"></script>
<textarea id="expression"></textarea>
<!--Press button for x^2 to appear-->
<button id="button1">Add</button>
<button id="button2">Replace</button>
<!--x^2 appears here-->
<p class="sqrt">\begin{equation}
x+1\over\sqrt{1-x^2}
\end{equation}</p>

DOM manipulation with mathjax

1 Answers1