- #1
aheight
- 321
- 109
Hi,
I have an HTML table and would like to insert mathcode into one of the rows after the page is loaded according to external data in files I'm loading. I've included script for MathJax and I'm trying to use:
document.GetElementbyId("testInsert").innerHTML=
but cannot get it to work with something like:
document.GetElementbyId("testInsert").innerHTML=$x^2$;
And was wondering if I was doing something wrong or if someone could help me?
Below is a simple file I'm testing the code with. In my web page, I am reading a file containing a latex string for an equation and would like to then display the equation on the web page. Is this even possible? In the code below, I'm trying to insert the mathcode in the table data with id="testInsert".
I have an HTML table and would like to insert mathcode into one of the rows after the page is loaded according to external data in files I'm loading. I've included script for MathJax and I'm trying to use:
document.GetElementbyId("testInsert").innerHTML=
but cannot get it to work with something like:
document.GetElementbyId("testInsert").innerHTML=$x^2$;
And was wondering if I was doing something wrong or if someone could help me?
Below is a simple file I'm testing the code with. In my web page, I am reading a file containing a latex string for an equation and would like to then display the equation on the web page. Is this even possible? In the code below, I'm trying to insert the mathcode in the table data with id="testInsert".
JavaScript:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
//
// script for mathjax
//
<script type="text/x-mathjax-config">
MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
<script type="text/javascript" async
src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML">
</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
TeX: { equationNumbers: { autoNumber: "AMS" } }
});
</script>
<script type="text/javascript">
function webGLStart() {
//
// now attempt to insert math code in one of the table data elements:
//
document.getElementById("testInsert").innerHTML=$x^2$;
}
</script>
</head>
<body onload="webGLStart();">
<table id="table1">
<tr>
<tr>
<td id="testInsert">
this is a taest
</td>
</tr>
<td>
<canvas id="lesson02-canvas" width="600"
height="600" style="border:1px solid #000000;"></canvas>
</td>
<td class="head1" >
<p class="heading1" > Drag to rotate. Use mouse wheel to zoom.</p>
<table id="table2" >
<tr>
<td class="ring1" id="checkInsert">
Ring 1: <input type="checkbox" id="ring1"
checked="checked" name="ring1" />
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>