Why the mathjax can't display correctly

I use js to change element.innerHTML to mathjax, but it doesn’t display correctly. Here is my code.

{{front}}
<div id="tt" onclick="test()">\(\alpha=1\)</div> 

<script>
function test()
{
    document.getElementById("tt").innerHTML="\(\alpha=2\); \\(\\alpha=2\\)"
}
</script>

Here is the picture of anki before I click
before

Here is after I click
after

You have to call the MathJax rendering function yourself. This appears to work:

{{front}}
<div id="tt" onclick="test()">\(\alpha=1\)</div> 

<script>
function test()
{
    document.getElementById("tt").innerHTML=MathJax.tex2chtml("\(\alpha=2\); \\(\\alpha=2\\)")
}
</script>

Thank you. I add

MathJax.typeset()

after

 document.getElementById("tt").innerHTML="\(\alpha=2\); \\(\\alpha=2\\)"

It work.

1 Like

This problem solved, how do I close the topic?