为什么 MathJax 在我的 JavaScript 代码的输出中似乎无法正常工作？

Question

我正在尝试编写一个生成点积问题的简单程序。我使用的代码如下：

<!DOCTYPE html>
<html>
<body>

<head>
<script type="text/x-mathjax-config">
    MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\(','\)']]}});
</script>
<script type="text/javascript"
    src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
</script>
</head>



<button onclick="myFunction()">Generate Question</button>

<br>
<br>
<p id="demo2"></p>
<hr>
<p id="demo"></p>

<script>
function myFunction() {
var a = Math.floor((Math.random() * 10) + 1);
var b = Math.floor((Math.random() * 10) + 1);
var c = Math.floor((Math.random() * 10) + 1);
var x = Math.floor((Math.random() * 10) + 1);
var y = Math.floor((Math.random() * 10) + 1);
var z = Math.floor((Math.random() * 10) + 1);

var dot = (a*x)+(b*y)+(c*z);





document.getElementById("demo2").innerHTML = "Find the       solution to the dot product (" + a + ", " + b + ", " + c + ")" + "$\.   \cdot$" + "(" + x + ", " + y + ", " + z + ")";

document.getElementById("demo").innerHTML = "Solution: (" + a + ", " + b + ", " + c + ")" + "$\cdot$" + "(" + x + ", " + y + ", " + z + ") = " + dot;

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

}
</script>

</body>
</html>

然而，这给出的输出看起来像

为什么会这样渲染？它在解决方案中正常工作，但在问题中没有。

Answer 1

除了 Peter 和 MvG 在上面的评论中指出的缺少双反斜杠之外，第一个数学未排版的原因是您只要求 MathJax 排版 "demo" 元素，而另一个数学在 "demo2" 元素中。尝试使用

MathJax.Hub.Queue(['Typeset', MathJax.Hub, ["demo2","demo"]]);

相反。

为什么 MathJax 在我的 JavaScript 代码的输出中似乎无法正常工作？

Why does MathJax not seem to be working properly in the output of my JavaScript code?

javascript

math

mathjax