使用 HTML 和 MathJax 渲染动态方程答案

【问题标题】：Using HTML and MathJax to render dynamic equations使用 HTML 和 MathJax 渲染动态方程
【发布时间】：2019-04-21 04:20:30
【问题描述】：

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

<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 库正常工作

【问题讨论】：

标签： html math render mathjax

【解决方案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 代码

【讨论】：