javascriptmathjaxmathjs

How to connect MathJax and Math.js to sliders

I've found multiple examples of user input that automatically updates a MathJax equation parsed with the Math.js javascript library (example), but it seems to break whenever I connect it to sliders for some reason.

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 for the above referenced example. Here's a line of my js code since I can't post this question without it: dynamic_equation.value = '1/' + vmax + ' + ' + k_m + '/' + vmax + '(1 + ' + i + '/' + k_i + ')';

Solution

  • The main problem is that instead of initializing dynamic_equation once, its innerHTML is always reset. This means MathJax's previous output is deleted, including the Jax object that is looked up later.

    I'm guessing you did this because you had trouble synchronizing with MathJax on the first load.

    Here's a small modification that might do what you are after. (One could work harder to remove the jitter, e.g., rendering MathJax in temporary node and replacing the output.)

    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>