文章/答案/技术大牛

发布

社区首页 >问答首页 >如何将MathJax和Math.js连接到滑块

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

Stack Overflow用户

提问于 2018-05-16 20:41:49

回答 1查看 203关注 0票数 1

我已经找到了多个用户输入的例子，这些例子自动更新了使用Math.js javascript库(示例)解析的Math.js方程，但是每当我将它连接到滑块时，它似乎就会中断。

我一直在和这是一个CodePen一起玩。请有人解释一下为什么MathJax突然失败了，以及我如何解决这个问题？这是密码是上面提到的例子。这是我的js代码的一行，因为如果没有js代码，我就不能发布这个问题：dynamic_equation.value = '1/' + vmax + ' + ' + k_m + '/' + vmax + '(1 + ' + i + '/' + k_i + ')';

javascript

mathjax

mathjs

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-05-17 07:03:22

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

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/50379572

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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