Search code examples
javascripttextareasymbolsmathml

Displaying MathML symbols inside a textarea

I'm building what is basically a mathematic text editor in an HTML file. My goal is to allow the user to display numbers and MathML symbols in a textarea, but completely without the use of a physical keyboard. On the bottom of the page I have a mock keyboard made of buttons with numbers and arithmetic symbols. When the user clicks these buttons, the corresponding number or symbol will then appear inside the textarea. So far, I can get this to work with numbers, but not the MathML symbols. Is there any way to get these symbols to show up inside the textarea?

To make this easier to understand, here's a function called by one of the buttons to insert the number 1 into the textarea:

function insertOne(mctextarea,oneText='1'){
    document.getElementById('mctextarea').value += oneText;
}

And here's a function I tried writing to insert a square root sign into the textarea:

function insertSqrt(mctextarea,sqrt=<math xmlns="http://www.w3.org/1998/Math/MathML" display="inline"><mrow><msqrt>x</msqrt></mrow></math>){
    document.getElementById('mctextarea').value += sqrt;
}

...which obviously doesn't work, but I don't know where to begin trying to display MathML in the textarea.

Be aware that I've only been using Javascript for about 3 weeks now, so I'm still learning the ropes. :)

Solution

  • Ben, I am very new to stackoverflow.com so I can not post a picture of what this code renders. I am using opensource MathJax.js to render mathematical function in HTML. You can find better examples at www.MathJax.org.

    PS: I am still learning how to format answers correctly ;)
    Code Example:

    <!DOCTYPE html>
<html lang="en" >
  <head>
    <title></title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <p>Have you seen MathJax.js at www.mathjax.org</p>
    <p>$$
      \large
      \begin{align&#42;}
      &amp; J(\theta) = \dfrac{1}{m} \sum&#95;{i=1}^m Cost((h&#95;
      \theta(x^{(i)}),y^{(i)}) \newline
      &amp; Cost((h&#95;\theta(x),y) = -log(h&#95;\theta(x)) \; &amp; \text{if y = 1}\newline
      &amp; Cost((h&#95;\theta(x),y) = -log(1-h&#95;\theta(x)) \; &amp; \text{if y = 0}\end{align&#42;}
      $$
    </p>

    <script type='text/javascript' src='http://cdn.mathjax.org/mathjax/late/MathJax.js?config=TeX-AMS-MML_HTMLorMML'></script>
  </body>
</html>