0

I have a test HTML file that does display the value of PI correctly (as a symbol).

HTML

<html>
  <head>
    <script type="text/javascript"
    src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML">
    </script>
  </head>
  <body>
    <div id="mathDiv">
      $$f(r) = \pi r^2$$
    </div>
    <script src="BinomialExpansion.js"></script>
  </body>
</html>

I have a javascript file (BinomialExpansion.js) below that attempts to append the identical equation below using the DOM. This mostly works. All LaTex renders properly except for the constant PI. Or any constant that I have tried it on.

JavaScript

window.onload = mathStuff;

function mathStuff() {
  let mathDiv = document.getElementById('mathDiv');
  let testNode = document.createTextNode("$$f(r) = \pi r^2$$");
  mathDiv.appendChild(testNode);
  MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
}

Screenshot (Chrome) enter image description here

Obviously, I am confused. At first, I thought there might be some sort of race condition being created as the page loads but attaching the code responsible for the DOM manipulation to the .onload property of the window object should have fixed the issue if that were the cause. Why is PI not displaying as a symbol when added via the DOM?

Shadow43375
  • 514
  • 7
  • 20
  • Backslash is an active character in JavaScript. You need to escape it. – Peter Krautzberger Dec 15 '18 at 07:21
  • Possible duplicate of [Issue Generating a Sigma using MathJax (1 success and 1 Fail)](https://stackoverflow.com/questions/53369175/issue-generating-a-sigma-using-mathjax-1-success-and-1-fail) – scraaappy Dec 19 '18 at 12:09

0 Answers0