如何将 MathJax 和 Math.js 连接到滑块答案

【问题标题】：How to connect MathJax and Math.js to sliders如何将 MathJax 和 Math.js 连接到滑块
【发布时间】：2018-05-16 20:41:49
【问题描述】：

我发现了多个用户输入示例，这些示例会自动更新使用 Math.js javascript 库 (example) 解析的 MathJax 方程，但由于某种原因，每当我将其连接到滑块时，它似乎就会中断。

Here's a CodePen我一直在玩。有人可以解释一下为什么 MathJax 突然失败了，我该如何解决这个问题？ Here's the code 用于上述引用的示例。这是我的 js 代码行，因为没有它我无法发布这个问题： dynamic_equation.value = '1/' + vmax + ' + ' + k_m + '/' + vmax + '(1 + ' + i + '/' + k_i + ')';

【问题讨论】：

标签： javascript mathjax mathjs

【解决方案1】：

主要问题是dynamic_equation 没有初始化一次，它的innerHTML 总是被重置。这意味着 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>

【讨论】：

很高兴听到这有帮助。