我发现了多个自动更新使用 Math.js javascript 库 ( example ) 解析的 MathJax 方程式的用户输入示例，但由于某种原因，每当我将它连接到 slider 时它似乎都会中断。
Here's a CodePen我一直在玩弄。有人可以解释为什么 MathJax 突然失败以及我该如何解决这个问题？ Here's the code对于上面引用的示例。这是我的一行 js 代码，因为没有它我无法发布这个问题:
dynamic_equation.value = '1/' + vmax + '+ ' + k_m + '/' + vmax + '(1 + ' + i + '/' + k_i + ')';
最佳答案
主要问题是它的 innerHTML 总是被重置，而不是一次初始化 dynamic_equation。这意味着 MathJax 之前的输出被删除，包括稍后查找的 Jax 对象。
我猜你这样做是因为你在第一次加载时无法与 MathJax 同步。
这里有一个小修改，可能会满足您的需求。 (可以更加努力地消除抖动，例如，在临时节点中呈现 MathJax 并替换输出。)
function draw() {
var aNode = document.querySelector("#a");
var k_m = aNode.value;
aNode.parentNode.querySelector("output").textContent = k_m;
var bNode = document.querySelector("#b");
var i = bNode.value;
bNode.parentNode.querySelector("output").textContent = i;
var cNode = document.querySelector("#c");
var k_i = cNode.value;
cNode.parentNode.querySelector("output").textContent = k_i;
var vmax = 2;
var dynamic_equation = document.getElementById('dynamic_equation'),
result = document.getElementById('result');
var mathjsinput = '1/' + vmax + ' + ' + k_m + '/' + vmax + '(1 + ' + i + '/' + k_i + ')';
var texstring = '$$\\frac{1}{V_0} = ' + math.parse(mathjsinput).toTex() + '\\biggl(\\frac{1}{[S]}\\biggr)$$';
result.innerHTML = math.format(math.eval(mathjsinput));
var node = null;
try {
// parse the expression
node = math.parse(mathjsinput);
}
catch (err) {}
try {
// export the expression to LaTeX
var latex = node ? node.toTex() : '';
console.log('LaTeX expression:', latex);//
// display and re-render the expression
MathJax.Hub.Queue(function () {
var elem = MathJax.Hub.getAllJax('dynamic_equation')[0]
MathJax.Hub.Queue(['Text', elem, latex]);
});
}
catch (err) {}
};
window.onload = draw;body,
html,
table td,
table th,
input[type=text] {
font-size: 11pt;
font-family: verdana, arial, sans-serif;
}
h1 {
font-size: 11pt;
}
input[type=text] {
padding: 5px;
width: 400px;
}
table {
border-collapse: collapse;
}
table td,
table th {
padding: 5px;
border: 1px solid lightgray;
}
table th {
background-color: lightgray;
}
form.user{
float: left;
width: 24rem;
padding: 0;
}<head>
<title>math.js | pretty printing with MathJax</title>
<script src="https://unpkg.com/mathjs@4.2.2/dist/math.min.js"></script>
<script>
window.MathJax = {
"fast-preview": {
disabled: true
}
};
</script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-AMS-MML_HTMLorMML.js"></script>
</head>
<body>
<div class="input">
<form class="user">
<fieldset>
<label>
Please input value of K<sub>M</sub> between 0 to 100
</label>
<input id=a type=range min=0 max=100 step=1 oninput="draw();" value=7 />K<sub>M</sub> =
<output />
</fieldset>
<fieldset>
<label>
Please input value of I between 0 to 100
</label>
<input id=b type=range min=0 max=100 step=1 oninput="draw()" value=2 />I =
<output />
</fieldset>
<fieldset>
<label>
Please input value of K<sub>i</sub> between 0 to 100
</label>
<input id=c type=range min=0 max=100 step=1 oninput="draw()" value=4 />K<sub>i</sub> =
<output />
</fieldset>
</form>
</div>
<table>
<tr>
<th>Dynamic Equation</th>
<td><div id="dynamic_equation">$$$$</div></td>
</tr>
<tr>
<th>Result</th>
<td><div id="result"></div></td>
</tr>
</table>
</body> 关于javascript - 如何将 MathJax 和 Math.js 连接到 slider ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50379572/