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

Question

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

Here's a CodePen I've been playing around with. Can somebody please explain why MathJax fails all of a sudden and how I can fix this? Here's the code 对于上面引用的示例。这是我的一行 js 代码，因为没有它我无法 post 这个问题： dynamic_equation.value = '1/' + vmax + ' + ' + k_m + '/' + vmax + '(1 + ' + i + '/' + k_i + ')';

Answer 1

主要问题是，它的 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>

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

How to connect MathJax and Math.js to sliders

javascript

mathjax

mathjs