Javascript динамический onClick - PullRequest
Новая
       17

Javascript динамический onClick

0 голосов
/ 27 июня 2019

У меня есть 2 компонента codemirror на странице, и когда вы нажимаете кнопку «Выполнить», я хочу, чтобы он запускал код только над кнопкой.

У меня проблема в том, что он запускает только последний компонент codemirror и не запускает отдельный код так, как мне нравится.

Есть ли какой-либо способ в функции кнопки onClick ниже, чтобы установить это динамически?

Компоненты Codemirror с кнопками onClick: 

<code><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">
<! - Если вы хотите, чтобы графика черепахи включала холст ->

заголовок питона
<! - Если вы хотите, чтобы графика черепахи включала холст ->

Вот функция 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>

1 Ответ

0 голосов
/ 27 июня 2019

Проблема в том, что вы используете одно и то же имя переменной 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();
    [...]
}
...