Второй вызов функции набора текста Mathjax из jQuery не работает - PullRequest
Новая
       12

Второй вызов функции набора текста Mathjax из jQuery не работает

1 голос
/ 17 октября 2019

Я пытаюсь просмотреть уравнения, набранные в текстовом поле HTML (в Tex), как математические уравнения, используя MathJax . Если уравнения отображаются неправильно, мне нужно отредактировать уравнения и просмотреть их в математических уравнениях.

Впервые это работает нормально. Но после того, как редактирование выполнено, команда Mathjax typeset показывает ошибки . Прошу вас пройти через это и предложить возможные ошибки.

Я использую 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>

Во второй раз, когда я нажимаю кнопку, отображается следующая ошибка:

Uncaught TypeError: Невозможно прочитать свойство 'appendChild' из null в l.append (tex-mml-chtml.js: 1)

Я новичок в JavaScript. Заранее благодарю вас за то, что поделились любой ошибкой или предложением для правильной работы кода.

1 Ответ

1 голос
/ 26 октября 2019

Я столкнулся с той же проблемой, и я думаю, что это может быть ошибка. В любом случае, это может быть решено путем рендеринга уравнения во вспомогательный тег «p» внутри вашего элемента «qPreview», а затем удаления и повторного создания этого тега при изменении уравнения. Например: 

$("#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 функция: используйте можно написать $("#input").val() вместо document.getElementById("input").value
  • Переменная qPreview не определена, поэтому MathJax.typeset(qPreview[0]) приведет к ошибке.
  • MathJax.typeset()не ожидает ни аргументов, ни списка в качестве аргумента. (Вот почему "#qPreview" в моем коде в скобках). Для получения дополнительной информации см. документацию :

    Обе функции принимают необязательный аргумент, который представляет собой массив элементов, содержимое которых должно быть обработано. Элементом может быть либо фактический элемент DOM, либо строка селектора CSS для элемента или набора элементов. Предоставление массива элементов ограничит набор текста только содержимым этих элементов.

...