Javascript innerHTML添加脚本会导致错误

这是我用来为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);
    }

但这将显示一个错误，即

ReferenceError:cannotfind variable:change

---

我哪里出错了？

它拒绝这一行：

s.value = {x};

括号用于Javascript的对象文字语法。它希望您以一个hashmap完成，如下所示：

s.value = {x: 'someValue'}

<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>

您的括号中的结束括号是意外的。然而，你真正想要的是一条线。就Javascript而言，字符串对LaTex意味着某种特殊的东西这一事实只是巧合：

s.value = '{x}';

---

这是否能实现你的最终目标还有待观察，但如果不能实现，那么你可能需要另外提出一个问题。快乐编码我猜您可能想做以下事情：

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);
}

调用

change（）

函数会在

标记的末尾添加一个带有脚本标记的

div

，如下所示：

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

{x}

我终于找到了我的问题所在。这只是我在html页面中转换或呈现MathJax脚本的错误方式。它应该这样固定：

s.value = {x: 'someValue'}

<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>

添加另一个脚本：

<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>

//
//使用闭包可以从
//全局命名空间
//
（功能（）{
var QUEUE=MathJax.Hub.QUEUE；//队列的简写
var math=null；//数学输出的元素jax。
//
//在MathJax生成元素jax时获取它。
//
QUEUE.Push（函数（）{
math=MathJax.Hub.getAllJax（“MathOutput”）[0]；
});
//
//用于键入的onchange事件处理程序
//用户输入的数学
//
window.UpdateMath=函数（TeX）{
Push（[“Text”，math，“\\displaystyle{”+TeX+“}]”）；
}
})();

然后它可以很容易地像这样转换：

s.value = {x: 'someValue'}

<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>

键入一些TeX代码：（示例：\int\sin{x}\；{dt}）


您键入：${}$

输出如下所示：

---

感谢@DemoUser的宝贵回答。

您能将调用此函数的代码粘贴到其中吗？

s.value={x}

？也许你想要

s.textContent=x

？为什么不直接使用

newDiv.appendChild

，而不是尝试使用

.toString（）

？s.textContent=x给出samenewDiv。appendChild也返回相同的错误。括号不是用于JSON的，请阅读你链接的文章。@Teemu花括号，字符串，冒号，value，结束卷曲括号。在我看来，这就像Javascript中对象的符号。我觉得你在尝试做一个很好的语义区分，可能是因为它没有为消息传递进行字符串化。也许您应该解释一下。JSON语法用于将描述一组ECMAScript对象的字符串转换为实际对象。当您在源代码中描述一个对象文字时，这正是发生的情况，您正在键入一个字符串，解释器将其转换为实际对象。解释器接受源代码中的非标准JSON是另一回事。此外，我认为在帮助初学者时没有理由不应用Duck规则。解析JSON的是

JSON.parse（）

，JavaScript解释器解析JavaScript。您已经链接到一篇关于独立于语言的数据交换格式的文章，这与OP的问题完全无关。如果JSON最初被命名为DIF，那么您很可能不会链接到这篇文章。关于鸭子规则，你认为用误导性的术语让新手更加困惑是公平的吗？顺便说一句，

{x}

是完全有效的JS，但不是右手赋值。除了脚本没有运行之外，一切都在发生/@阿披实能否更清楚地说明“脚本未运行”。。！脚本应该生成一个斜体的x，因为它应该以LaTeX格式显示。但我看不到任何附加内容。虽然用警报（“Hello”）代替它可以完成任务。