使用 HTML 和 MathJax 渲染动态方程

Question

所以我正在尝试使用我之前试图获得帮助的大型程序的代码来计算二项式平方。由于其他程序的代码很大，我制作了一个子程序来演示我遇到的问题

<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>

它在浏览器中运行得很好，但在输出新方程后我无法让 mathjax 库正常工作

Answer 1

我需要添加一段缺失的代码

<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>

花了一些时间才找到它，但我找到了。希望这对以后的人有帮助这是您需要的 Mathjax 代码

使用 HTML 和 MathJax 渲染动态方程

Using HTML and MathJax to render dynamic equations

html

math

render

mathjax