按下按钮时更改 LaTeX

Question

我正在尝试创建一个生成随机函数然后在 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)\)"。你如何让它工作两次？

Answer 1

http://latex.codecogs.com/latexit.js最后执行：

LatexIT.add('*');

添加并加载执行呈现函数的侦听器，这就是为什么在第一种情况下有效，页面在您的第一个脚本后结束加载。您可以简单地在更改函数中添加渲染函数。

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

按下按钮时更改 LaTeX

Change LaTeX when button is pressed

javascript

html

latex