Question

我正在尝试使用 MathJax 将在HTML文本框中（在Tex中）键入的方程视为数学方程。如果未正确查看方程式，则需要对方程式进行编辑，并以数学方程式进行审查。

第一次，它可以正常工作。 但是在执行编辑后，Mathjax排版命令会显示错误。请您仔细阅读，并提出可能的错误。

我使用的HTML是：

<html>
    <head>
        <title>
            Equation Edit
        </title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
        <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3.0.0/es5/tex-mml-chtml.js"></script>
    </head>
    <body>
        <strong> Here is the result :<br></strong>
        <input type="text" id=input value="\(ax^2 + bx + c = 0\)">
        <div id="qPreview"></div>
            <button id="check">Click</button>
    </body>
</html>

我正在使用的脚本是：

<script type="text/javascript">
            var eq;
            $("#check").click(function(){
                eq=document.getElementById("input").value;
                document.getElementById("qPreview").innerHTML=eq;
                MathJax.typeset(qPreview[0]);
            });

        </script>

当我单击按钮时，它第二次显示以下错误：

未捕获的TypeError：无法读取null的属性'appendChild' 在l.append（tex-mml-chtml.js：1）

我是javascript新手。在此先感谢您分享任何错误或建议，以使代码正常工作。

Answer 1

我遇到了同样的问题，我认为这可能是一个错误。无论如何，可以通过将方程式呈现到“ qPreview” div内的辅助“ p”标签，然后在修改方程式时删除并重新创建此标签来解决。例如：

$("#check").click(function(){
    $("#qPreview").empty().append("<p>" + $("#input").val() + "</p>");
    MathJax.typeset(["#qPreview"]);
});

<script src="https://cdn.jsdelivr.net/npm/mathjax@3.0.0/es5/tex-mml-chtml.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<strong> Here is the result :<br></strong>
<input type="text" id=input value="\(ax^2 + bx + c = 0\)">
<div id="qPreview"></div>
<button id="check">Click</button>

一些代码注释：

如果您使用的是jQuery，则可以使用它代替getElementById函数来使生活更轻松：use可以编写$("#input").val()而不是document.getElementById("input").value
未定义qPreview变量，因此MathJax.typeset(qPreview[0])会导致错误。
MathJax.typeset()不需要任何参数或列表作为参数。（这就是"#qPreview"在我的代码中放在括号中的原因）。有关更多信息，请参见documentation：

两个函数都带有一个可选参数，该参数是应处理其内容的元素数组。元素可以是实际的DOM元素，也可以是元素或元素集合的CSS选择器字符串。提供元素数组会将排版限制为仅这些元素的内容。

第二次从jQuery对Mathjax排版功能的调用不起作用

1 个答案: