innerHTML adding scripts causes error

Question

innerHTML adding scripts causes error

This is my function that I'm using to add script for TeX:

function change() {
        var format = document.getElementById("format");
        var original_text = document.getElementById("question");
        var s = document.createElement('script');
        s.setAttribute('type', 'math/tex; mode=display');
        s.value = {x};
        var newdiv = document.createElement('div');
        newdiv.innerHTML = s.toString();
        document.body.appendChild(newdiv);
    }

But this shows an error as ReferenceError: Can't find variable: change

Where did I go wrong?

javascript
node.js
jade

Answer 1

It is rejecting this line:

s.value = {x};

The brackets are for ~~JSON (JavaScript Object Notation)~~ Javascript's object literal syntax. It is expecting you to finish with a hashmap, something like this:

s.value = {x: 'someValue'}

The closing bracket in yours is unexpected. What you actually want, though, is a string. The fact that the string means something special to LaTex is just a coincidence as far as Javascript is concerned:

s.value = '{x}';

Whether this accomplishes your ultimate goal remains to be seen, but if it doesn't then you'll probably need to open a separate question. Happy coding <3

Answer 2

I guess you probably wanted to do something like:

function change() {
    var format = document.getElementById("format");
    var original_text = document.getElementById("question");
    var s = document.createElement('script');
    s.setAttribute('type', 'math/tex; mode=display');
    s.innerHTML = "{x}";
    var newdiv = document.createElement('div');
    newdiv.appendChild(s);
    document.body.appendChild(newdiv);
}

Calling the change() function adds a div with script tag at end of <body> tag, as:

<div><script type="math/tex; mode=display">{x}</script></div>

Answer 3

I've finally figured out what my problem was. It was just the wrong way I was converting or rendering a MathJax script in a html page. It should be fixed like this:

Adding another script:

<script>
  //
  //  Use a closure to hide the local variables from the
  //  global namespace
  //
  (function () {
    var QUEUE = MathJax.Hub.queue;  // shorthand for the queue
    var math = null;                // the element jax for the math output.

    //
    //  Get the element jax when MathJax has produced it.
    //
    QUEUE.Push(function () {
      math = MathJax.Hub.getAllJax("MathOutput")[0];
    });

    //
    //  The onchange event handler that typesets the
    //  math entered by the user
    //
    window.UpdateMath = function (TeX) {
      QUEUE.Push(["Text",math,"\\displaystyle{"+TeX+"}"]);
    }
  })();
</script>

Then it can easily be converted like this:

<p>
Type some TeX code: (Example: \int\sin{x}\;{dt})
</p>
<input id="MathInput" class="form-control" type="text" size="50" onchange="UpdateMath(this.value)" />
<p>

<div id="MathOutput">
You typed: ${}$
</div>

Output looks like:

enter image description here

Thanks to @DemoUser for his valuable answer.