按下按钮时更改LaTeX

时间:2015-06-04 21:53:31

标签: javascript html latex

我正在尝试创建一个生成随机函数的程序,然后在LaTeX中显示它们但我无法弄清楚如何在按下按钮时编辑LaTeX。

此代码有效:

<html>
<head>
<script type="text/javascript" src="http://latex.codecogs.com/latexit.js"></script>
</head>
<body>
<div lang="latex" id='Latexdiv'></div>

<script>
document.getElementById('Latexdiv').innerHTML = 'sin(x)';
</script>

</body>
</html>

但这不是:

<html>
<head>
<script type="text/javascript" src="http://latex.codecogs.com/latexit.js"></script>
</head>
<body>
<div lang="latex" id='Latexdiv'></div>
<button onclick="change();">Change the LaTeX</button>

<script>
function change()
{
    document.getElementById('Latexdiv').innerHTML = 'sin(x)';
}
</script>

</body>
</html>

我试着像这样使用MathJax:

<html>
<body>

<button onclick='change();'>Change the LaTeX</button>
<div lang='latex' id='Latexdiv'></div>



<script type='text/javascript'>

var latexdiv = document.getElementById('Latexdiv');

function change()
{   
    var latex = document.createElement('script');
    latex.src = 'http://latex.codecogs.com/latexit.js';
    document.head.appendChild(latex);

    var mathjax = document.createElement('script');
    mathjax.src = 'https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML';
    document.head.appendChild(mathjax);

    latexdiv.innerHTML = '\\(sin(x)\\)';
};


</script>

</body>
</html>

不幸的是,这只在您第一次按下按钮时才有效。如果按两次,它只会在常规HTML中显示“\(sin(x)\)”。你怎么能让它工作两次?

1 个答案:

答案 0 :(得分:1)

最后执行

http://latex.codecogs.com/latexit.js

LatexIT.add('*');

添加和执行渲染功能的onload侦听器,这就是为什么在第一种情况下工作,页面在第一个脚本之后加载。 您只需在更改功能中添加渲染功能即可。

function change()
{
  document.getElementById('Latexdiv').innerHTML = 'sin(x)';
  LatexIT.render('*',false);
}