使用HTML和MathJax渲染动态方程

时间:2018-11-18 18:01:38

标签: html math render mathjax

因此,我尝试使用代码对我试图获得较早帮助的大型程序进行平方二乘。由于其他程序的代码很大,因此我制作了一个子程序来演示

存在的问题
<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 lib正常工作

1 个答案:

答案 0 :(得分: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代码