Javascript动态onClick

Question

我在一个页面上有 2 个代码镜像组件，当您单击“运行”按钮时，我希望它只运行按钮上方的代码。

我遇到的问题是它只运行最后一个 codemirror 组件，并没有按照我喜欢的方式运行单个代码。

下面的按钮onClick函数有什么办法可以动态设置吗？

带有 onClick 按钮的 Codemirror 组件：

<div id="content">
        <section class="method first-of-group" id="intro">
          <div class="method-area method-area-expanded">
            <div class="method-copy">
              <h1 class="lesson-name">python title</h1>

            <div class="method-example">
              <div id="side-view">
                <div id="side-left">
                  <textarea id="yourcode" cols="40" rows="10">
my_name = "Sir Python"
print("Hello and welcome " + my_name + "!")
                    </textarea
                  >
                  <script type="text/javascript">
                    // insert codemirror
                    var myCodeMirror = CodeMirror.fromTextArea(yourcode, {
                      lineNumbers: true,
                      mode: "python"
                    });
                  </script>
                </div>
                <br />

                <div id="side-right">
                  <div id="console">
                    <pre id="output"></pre>
                  </div>
                  <!-- If you want turtle graphics include a canvas -->
                  <div id="mycanvas"></div>
                </div>
                <button type="button" onclick="runit()">Run</button>
              </div>
            </div>
          </div>
        </section>

        <section class="method first-of-group" id="intro">
          <div class="method-area method-area-expanded">
            <div class="method-copy">
              <h1 class="lesson-name">python title</h1>

            <div class="method-example">
              <div id="side-view">
                <div id="side-left">
                  <textarea id="authcode" cols="40" rows="10">
# This code will print out Hello World
print("Hello World")
                      </textarea
                  >
                  <script type="text/javascript">
                    // insert codemirror
                    var myCodeMirror = CodeMirror.fromTextArea(authcode, {
                      lineNumbers: true,
                      mode: "python"
                    });
                  </script>
                </div>
                <br />

                <div id="side-right">
                  <div id="console">
                    <pre id="output"></pre>
                  </div>
                  <!-- If you want turtle graphics include a canvas -->
                  <div id="mycanvas"></div>
                </div>
                <button type="button" onclick="runit()">Run</button>
              </div>
            </div>
          </div>
        </section>
      </div>

这里是onClick函数：

<script type="text/javascript">
      // output functions are configurable.  This one just appends some text
      // to a pre element.
      function outf(text) {
        var mypre = document.getElementById("output");
        mypre.innerHTML = mypre.innerHTML + text;
      }
      function builtinRead(x) {
        if (
          Sk.builtinFiles === undefined ||
          Sk.builtinFiles["files"][x] === undefined
        )
          throw "File not found: '" + x + "'";
        return Sk.builtinFiles["files"][x];
      }

      // Here's everything you need to run a python program in skulpt
      // grab the code from your textarea
      // get a reference to your pre element for output
      // configure the output function
      // call Sk.importMainWithBody()
      function runit() {
        var prog = myCodeMirror.getValue();
        var mypre = document.getElementById("output");
        mypre.innerHTML = "";
        Sk.pre = "output";
        Sk.configure({ output: outf, read: builtinRead });
        (Sk.TurtleGraphics || (Sk.TurtleGraphics = {})).target = "mycanvas";
        var myPromise = Sk.misceval.asyncToPromise(function() {
          return Sk.importMainWithBody("<stdin>", false, prog, true);
        });
        myPromise.then(
          function(mod) {
            console.log("success");
                      ]
          },
          function(err) {
            console.log(err.toString());
          }
        );
      }
    </script>

Answer 1

问题在于您正在重用相同的变量名称myCodeMirror。由于页面上的脚本是按 DOM 顺序执行的，所以使用最后一个值。

此外，您使用的是相同的 runit() 方法，没有区分要运行哪个镜像，因此它将始终在您设置的最后一个 CodeMirror 上运行。

---

首先，您需要将 CodeMirror 存储在不同的变量中：

var myCodeMirror1 = CodeMirror.fromTextArea(yourcode, {
    lineNumbers: true,
    mode: "python"
});

[...]

var myCodeMirror2 = CodeMirror.fromTextArea(authcode, {
    lineNumbers: true,
    mode: "python"
});

然后每个按钮需要告诉runit使用哪一个：

<button type="button" onclick="runit(myCodeMirror1)">Run</button>

[...]

function runit(mirrorToRun) {
    var prog = mirrorToRun.getValue();
    [...]
}