Pull variable from HTML textbox

bagofmilk

no leída,

19 jul 2012, 9:43:1719/7/12

a mathja...@googlegroups.com

I want to display an equation but using the user input value from a textbox. It will only display the latex code as text, and not as code...Can anyone help?

FYI I had to use \ as the "\" because HTML would read only that and not the rest.

I also put the same code (no variables) down below in a div, for anyone who wants to see it without the \

----------------------------

<html>

<head>

function getone(){

var des;

var step = 1;

var txt1 = parseFloat(document.getElementById("txt1").value);

var equation1 = "\[\newcommand{\cvval}{" + txt1 + "}\]" + "<br/>";

var equation2 = "\[\mathrm{k\,=\,\frac{C_p}{\cvval}}\]";

des= equation1 + equation2;

document.getElementById('divid_des').innerHTML = des;

}

</script>

</head>

<body>

<br />

<div id="divid">\[\mathrm{k\,=\,\frac{C_p}{C_v}}\]</div>

</body>

</html>

Davide P. Cervone

no leída,

19 jul 2012, 11:01:1219/7/12

a mathja...@googlegroups.com

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 http://www.mathjax.org/docs/2.0/typeset.html
for details.) Here is a version that does that:

<!DOCTYPE html>

function getone(){
var des;
var step = 1;
var txt1 = parseFloat(document.getElementById("txt1").value);

var equation1 = "\\[\\newcommand{\\cvval}{" + txt1 + "}\\]" + "<br/
>";
var equation2 = "\\[\\mathrm{k\\,=\\,\\frac{C_p}{\\cvval}}\\]";

des= equation1 + equation2;

document.getElementById('divid_des').innerHTML = des;

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 "\" 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>

function getone(){
var des;
var step = 1;
var txt1 = parseFloat(document.getElementById("txt1").value);

var equation1 = "\\[\\newcommand{\\cvval}{" + txt1 + "}\\]" + "<br/
>";
var equation2 = "\\[\\mathrm{k\\,=\\,\\frac{C_p}{\\cvval}}\\]";

des= equation1 + equation2;

document.getElementById('divid_des').innerHTML = des;

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.

Davide

thermofl...@gmail.com

no leída,

5 oct 2012, 9:43:425/10/12

a mathja...@googlegroups.com

Wow. Sorry for such a late reply. This is perfect. Thank you very much.

Responder a todos

Responder al autor

Reenviar