admin管理员组文章数量:1355606
jsfiddle example: /
I'm trying to update MathJax-math by means of .html(), however, it seems my code isn't working. My current code looks somewhat like this, but it outputs "1+2=3" unrendered:
$$\class{x}{2}+\class{y}{2}=\class{z}{5}$$
<script>
$( '.x' ).html( '1' );
$( '.y' ).html( '2' );
$( '.z' ).html( '3' );
MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
</script>
I've tried different mands, but none seems to work. ["Rerender", MathJax.Hub] just renders "2+2=5", so it seems like the .html() is reset:
<script>
MathJax.Hub.Queue(["Rerender",MathJax.Hub]);
</script>
The wanted result would look somewhat like this (js omitted), where \class{x}{} (and others) may appear more than once in different places:
<span>You have chosen \(\class{x}{}\) and \(\class{y}{}\)</span>
$$\class{x}{}+\class{y}{}=\class{z}{}$$
Is there any way of rendering "1+2=3" this way? $( '.x' ) may be changed a number of times, not just once.
jsfiddle example: https://jsfiddle/3qu846tu/
I'm trying to update MathJax-math by means of .html(), however, it seems my code isn't working. My current code looks somewhat like this, but it outputs "1+2=3" unrendered:
$$\class{x}{2}+\class{y}{2}=\class{z}{5}$$
<script>
$( '.x' ).html( '1' );
$( '.y' ).html( '2' );
$( '.z' ).html( '3' );
MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
</script>
I've tried different mands, but none seems to work. ["Rerender", MathJax.Hub] just renders "2+2=5", so it seems like the .html() is reset:
<script>
MathJax.Hub.Queue(["Rerender",MathJax.Hub]);
</script>
The wanted result would look somewhat like this (js omitted), where \class{x}{} (and others) may appear more than once in different places:
<span>You have chosen \(\class{x}{}\) and \(\class{y}{}\)</span>
$$\class{x}{}+\class{y}{}=\class{z}{}$$
Is there any way of rendering "1+2=3" this way? $( '.x' ) may be changed a number of times, not just once.
Share Improve this question edited Aug 5, 2016 at 21:11 Frank Vel asked Aug 3, 2016 at 18:29 Frank VelFrank Vel 1,2081 gold badge14 silver badges29 bronze badges 13- 1 You might want to try to provide a proper example. Your first code block contains both DOM content (the TeX string) and JavaScript code; this doesn't make a lot of sense. My guess would be that you'd like to have the typesetting finish before running the jquery code (else there's no element anywhere with those classes). – Peter Krautzberger Commented Aug 4, 2016 at 6:27
- 1 Again, a self-contained example using snippets or jsbin showing what you have so far would be a good idea. – Peter Krautzberger Commented Aug 4, 2016 at 16:51
- 1 This is the documentation you are likely looking for, but I still struggled to get things to work as individual elements on the page (even when I used \cssId instead of \class. docs.mathjax/en/v2.5-latest/typeset.html – ventaur Commented Aug 5, 2016 at 22:45
- 1 Frank you should start with ventaur's link to the MathJax documentation; it's the correct place to start. In short, you cannot change the output of MathJax like this. Instead, you need to modify the input and re-render that. Since you use LaTeX input, all you have is strings and so DOM-like approaches cannot work. You might find MathML as an input for MathJax easier (since you could use some DOM methods) but you'll still have to do the bookkeeping for the changing input in your application logic. – Peter Krautzberger Commented Aug 9, 2016 at 7:19
- 1 Note from the future: cdn.mathjax is nearing its end-of-life, check mathjax/cdn-shutting-down for migration tips. – Peter Krautzberger Commented Apr 12, 2017 at 7:49
1 Answer
Reset to default 6 +50Frank, use the following code:
HTML:
<html>
<head>
<script
src="http://cdn.mathjax/mathjax/latest/MathJax.js?config=TeX-AMS_HTML">
</script>
</head>
<body>
<div id="formula"></div>
A: <input type="text" id="valueA">
B: <input type="text" id="valueB">
C: <input type="text" id="valueC">
<p><input type="button" value="Update" onclick="DynamicMJ.update()" /></p>
<script>
var DynamicMJ = {
formula: document.getElementById("formula"),
update: function () {
var a = document.getElementById("valueA").value;
b = document.getElementById("valueB").value;
var c = document.getElementById("valueC").value;
var tex = "\\frac{"+a+"}{2}+ \\frac{"+b+"}{2} = \\frac{"+c+"}{5}";
this.formula.innerHTML = "\\["+tex+"\\]";
MathJax.Hub.Queue(["Typeset",MathJax.Hub,this.formula]);
}
};
DynamicMJ.update();
</script>
</body>
</html>
EXPLANATION:
You need to use an HTML element(div in this example) in order to write the values, and then you can insert the values of the textboxes directly into the formula.
Hope this helps!
本文标签： javascriptRendering MathJax updated with html()Stack Overflow
版权声明：本文标题：javascript - Rendering MathJax updated with .html() - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744049133a2582092.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论