Javascript动态onClick

Question

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

我遇到的问题是，它仅运行最后一个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上运行。

---

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

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();
    [...]
}