在 javascript 的更新序列中使用 mathjax

Question

我的程序中有四个动态变量，

xzero, xone, xtwo, xthree

表示三次函数的系数。我想在 HTML 中显示实际方程，格式如下：

xthree*x^3+xtwo*x^2+xone*x+xzero=f(x)

但它需要能够随变量更新，所以我原本以为我会做一个

document.getElementById("demo").innerHTML = (new equation);

但在我看来，要么 mathJax 在 javascript 中不起作用，要么我做得不对。我能想到的唯一替代解决方案是为每个变量制作四个 individual div 标签，并更新它们，但这似乎不必要地笨拙。我能否得到一些关于如何解决此问题的建议？

Answer 1

MathJax 在加载时自动渲染文档，但稍后不会。尝试明确请求重新渲染：

document.getElementById("demo").innerHTML = "...";
MathJax.Hub.Queue(["Typeset", MathJax.Hub, 'demo']);

编辑：经过一番思考，我认为您可以在一个元素中请求渲染，将其隐藏，然后将完成的标记复制到另一个元素中，以防止闪烁：

var mathDiv = document.getElementById('math');
var displayDiv = document.getElementById('display');

MathJax.Hub.Queue(["Typeset",MathJax.Hub,"math"]);
MathJax.Hub.Queue(function() {
  var math = MathJax.Hub.getAllJax("MathDiv")[0];
  var i = 1;
  setInterval(function() {
    MathJax.Hub.Queue(["Text", math, "\int_0^{" + i + "} x dx"]);
    MathJax.Hub.Queue(function() {
      displayDiv.innerHTML = mathDiv.innerHTML;
    });
    i++;
  }, 1000);
});

#math {
  display: none
}

<script type="text/javascript"
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
<div id="math">$$$$</div>
<div id="display"></div>

在 javascript 的更新序列中使用 mathjax

Using mathjax in an updating sequence in javascript

html

javascript

updates

mathjax