MathJax Equation Demo

HTML

<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML&amp;dummy=.js"></script>
 <html>
    <head>
    <script type="text/x-mathjax-config">
      MathJax.Hub.Config({
        tex2jax: {
          inlineMath: [["$","$"],["\\(","\\)"]]
        }
      });
    </script>
    <script type="text/javascript"
      src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML-full">
    </script>

    </head>
    <body>

<div><br><input onkeyup="UpdateMath()" class="level"></div>
<div><br><input onkeyup="UpdateMath()" class="level"></div>
<div class="input_fields_wrap">
</div>
<br><button class="add_field_button"><span>+</span></button>
   
    <div id="MathOutput">
	<style scoped>
	</style>
    </div>


<script>

function toArray(obj) { //return array when you introduce [object NodeList]
  var array = [];
  // iterate backwards ensuring that length is an UInt32
  for (var i = obj.length >>> 0; i--;) { 
    array[i] = obj[i].value;
  }
  return array;
}

//
//  Use a closure to hide the local variables from the
//  global namespace
//
(function () {

//
//  The onchange event handler that typesets the
//  math entered by the user
//
window.UpdateMath = function () {
    //set the MathOutput HTML
     //document.getElementById("TexOutput").innerHTML = TeX;
    
    values = document.getElementsByClassName('level');
    arrayvalues = toArray(values);
    
    var formula = "$10 &#92;log (";
    for (i = 0; i < arrayvalues.length; i++) {
	if (i == 0){
	 formula = formula + " 10^{ &#92;frac{" + arrayvalues[i] + "}{10}} ";
	}else{
	 formula = formula + " + 10^{ &#92;frac{" + arrayvalues[i] + "}{10}} ";
	}
    }
    formula = formula + ")$";
    
   document.getElementById('MathOutput').style.visibility = "hidden";
    
    document.getElementById("MathOutput").innerHTML = formula;
    //reprocess the MathOutput Element
    MathJax.Hub.Queue(["Typeset",MathJax.Hub,"MathOutput"]);
    
    MathJax.Hub.Queue(
    function () {
   ...