CODEWITHSUNDEEP
htmlmathrendermathjax
Alex Carlson
Alex Carlson

Reputation: 99

Using HTML and MathJax to render dynamic equations

So I am trying to make a binomial squared using code for a massive program I was attempting to get help with earlier. Since the code for the other program is huge I made a sub program to demonstrate what I am having issues with 

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>MathJax example</title>
    <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML" async>
    </script>
</head>

<body>
    <p id="This_Is_What_I_Want"> $$ (a-b)^2 $$</p>
    <p id="First_Input"> <input id="Value_A"></p>
    <p id="Second_Input"> <input id="Value_B"></p>
    <p id="Output"></p>
    <p id="Activate"><button onclick="RUN()">Test This out</button></p>
    <script>
        function RUN() {
            var a = document.getElementById("Value_A").value
            var b = document.getElementById("Value_B").value
            document.getElementById("Output").innerHTML = "$$(" + a + "-" + b + ")^2$$"
        }
    </script>
</body>

It runs in a browser just fine, but I cannot get the mathjax lib to work correctly after outputting the new equation

Upvotes: 0

Views: 589

Answers (1)

Alex Carlson
Alex Carlson

Reputation: 99

I needed to add in a piece of code that was missing 

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>MathJax example</title>
    <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML" async>
    </script>
</head>

<body>
    <p id="This_Is_What_I_Want"> $$ (a-b)^2 $$</p>
    <p id="First_Input"> <input id="Value_A"></p>
    <p id="Second_Input"> <input id="Value_B"></p>
    <p id="Output"></p>
    <p id="Activate"><button onclick="RUN()">Test This out</button></p>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS_HTML,http://myserver.com/MathJax/config/local/local.js">
        function RUN() {
            var a = document.getElementById("Value_A").value
            var b = document.getElementById("Value_B").value
            document.getElementById("Output").innerHTML = "$$ (" + a + "-" + b + ")^2 $$";
            MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
        }
    </script>
</body>

Took a while to find it, but I found it. Hopes this helps someone in the future it is the Mathjax piece of code you need

Upvotes: 2

Related Questions