OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

adding math formula string to document using javascript and MathJax

  • Thread starter Thread starter user10695266
  • Start date Start date
U

user10695266

Guest
When pressing the button to add the math formula, the MathJax statement does not seem to be interpretet:


Code:
const button = document.getElementById('go');
button.addEventListener('click', displayMath, true);

function displayMath() {
    const body = document.body;
    p = document.createElement('p');
    const a = 3, b = 2;
    const c = a + b;
    const math = "\\(" + a + "+ " + b + " = " + c + "\\)";
    p.innerHTML = math;
    body.appendChild(p);
}

Code:
<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" async
        src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML" async>
        </script>
    </head>

    <body>
        <p>press the button to display math like this: \(a + b = c\)</p>
        <button id="go" type="button">Go!</button>
        
        <script src="test.js"></script>
    </body>
</html>

1) Can MathJax statements be addet through events like a button click?

2) If not are there better alternatives?

I appreciate any help, thanks :>

<p>When pressing the button to add the math formula, the MathJax statement does not seem to be interpretet:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const button = document.getElementById('go');
button.addEventListener('click', displayMath, true);

function displayMath() {
const body = document.body;
p = document.createElement('p');
const a = 3, b = 2;
const c = a + b;
const math = "\\(" + a + "+ " + b + " = " + c + "\\)";
p.innerHTML = math;
body.appendChild(p);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><!DOCTYPE html>
<html>
<head>
<script type="text/javascript" async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML" async>
</script>
</head>

<body>
<p>press the button to display math like this: \(a + b = c\)</p>
<button id="go" type="button">Go!</button>

<script src="test.js"></script>
</body>
</html></code></pre>
</div>
</div>
</p>

<p>1) Can MathJax statements be addet through events like a button click?</p>

<p>2) If not are there better alternatives?</p>

<p>I appreciate any help, thanks :></p>
 

Latest posts

Top