2015-06-04 10 views
2

Я пытаюсь создать программу, которая генерирует случайные функции, а затем показывает их в 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> 

Это, к сожалению, только работает в первый раз нажмите кнопку. Если вы нажмете его дважды, он просто отобразит
«\ (sin (x) \)» в обычном HTML. Как вы можете заставить его работать дважды?

+0

Примечание из будущего: cdn.mathjax.org близится к концу срока их использования, проверить https://mathjax.org/cdn-shutting-down для миграции советы. –

ответ

1

http://latex.codecogs.com/latexit.js выполняет в конце:

LatexIT.add('*'); 

Это добавляет и OnLoad слушатель, который выполняет функцию рендеринга, поэтому работает в первом случае, страница заканчивается загрузка после первого сценария. Вы можете просто добавить функцию рендеринга в свою функцию изменения.

function change() 
{ 
    document.getElementById('Latexdiv').innerHTML = 'sin(x)'; 
    LatexIT.render('*',false); 
} 
Смежные вопросы