Skip to content

Variable from textbox demos

Jump to bottom Edit New page
Davide P. Cervone edited this page May 28, 2013 · 2 revisions

From https://groups.google.com/d/msg/mathjax-users/bTCPyGS4shU/nc_FSGyd-7IJ

After you set the contents of the div to contain new mathematics, you need to tell MathJax to process that mathematics. MathJax only processes the page once when it is loaded, so if you add math to the page, you must ask it to typeset that new math. You do that via a MathJax.Hub.Typeset() call. (See the modifying math on the page documentation for details.) Here is a version that does that:

<!DOCTYPE html>

<html>
<head>
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type="text/javascript">
function getone() {
  var step = 1;
  var txt1 = parseFloat(document.getElementById("txt1").value);
  var equation1 = "$$ \\\\newcommand{\\\\cvval}{" + txt1 + "} $$<br/>";
  var equation2 = "$$ \\\\mathrm{k\\\\,=\\\\,\\\\frac{C_p}{\\\\cvval}} $$";
  document.getElementById('divid_des').innerHTML =  equation1 + equation2;
  MathJax.Hub.Queue(["Typeset",MathJax.Hub,'divid_des']);
}
</script>

</head>
<body>
<input type="textbox" id="txt1" />
<input type="textbox" id="txt2" />

<input type="button" value="click" onclick="getone()" />
<br />
<br />
<br />

<div id="divid">$$ \mathrm{k\,=\,\frac{C_p}{C_v}} $$</div>
<div lang="latex" id="divid_des"></div>

</body>
</html>

The important line is the MathJax.Hub.Queue() call at the end of your getone() routine. Note that I've also replaced your &#92; by \\ since that is what is needed to get a literal backslash in a javascript string, and I find it easier to read.

If you are really going to be replacing the contents of the SAME div over and over, you might want to do this slightly differently:

<!DOCTYPE html>

<html>
<head>
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type="text/javascript">
function getone() {
  var step = 1;
  var txt1 = parseFloat(document.getElementById("txt1").value);
  var equation1 = "$$ \\\\newcommand{\\\\cvval}{" + txt1 + "} $$<br/>";
  var equation2 = "$$ \\\\mathrm{k\\\\,=\\\\,\\\\frac{C_p}{\\\\cvval}} $$";
  document.getElementById('divid_des').innerHTML = equation1 + equation2;
  return MathJax.Hub.Typeset('divid_des');
}
</script>

</head>
<body>
<input type="textbox" id="txt1" />
<input type="textbox" id="txt2" />

<input type="button" value="click" onclick="MathJax.Hub.Queue(getone)" />
<br />
<br />
<br />

<div id="divid">$$ \mathrm{k\,=\,\frac{C_p}{C_v}} $$</div>
<div lang="latex" id="divid_des"></div>

</body>
</html>

This moves the MathJax.Hub.Queue() call to the onclick handler. The reason for this is so that you don't change the contents of the DIV while MathJax is processing it (that could happen if the math you are displaying required MathJax to load an external file and the user pressed the button twice in quick succession). Moving the entire getone() call to the queue means that you are guaranteed that MathJax is finished before you change the contents of the DIV again. In this case, you need to return the value of the MathJax.Hub.Typeset() call, so that the queue will wait for it to complete properly.

Hope that helps.

Add a custom sidebar
Clone this wiki locally