У меня есть два файла
У меня есть код в index.php, который содержит формы и с помощью code.js. Я заменяю pre tag этой формой. Так что все нормально. Чтобы понять мою проблему, вы должны увидеть мой код. Поэтому, прежде всего, я даю свой код
Файл index.php:
<html> <head> <link rel="stylesheet" href="http://code.guru99.com/css/1140.css" type="text/css" media="screen" /> <link rel="stylesheet" href="http://code.guru99.com/css/styles.css" type="text/css" media="screen" /> <link rel="stylesheet" href="http://codemirror.net/doc/docs.css" type="text/css" media="screen" /> <script src="http://code.guru99.com/php/lib/codemirror.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">></script> <link rel="stylesheet" href="http://code.guru99.com/Sanjay/lib/codemirror.css" type="text/css" media="screen" /> <script type="text/javascript" src="http://code.guru99.com/perl/perl.js"></script> <script type="text/javascript" src="cperl.js"></script> <script src="code.js"></script> </head> <body> <style type="text/css"> .CodeMirror { border: 1px solid #eee; height: auto; width : 630px; } .CodeMirror-scroll { height: auto; overflow-y: hidden; overflow-x: auto; } </style> <p>Integer : whole numbers eg -3, 0, 69. The maximum value of an integer is platform-dependent. On a 32 bit machine, its usually around 2 billion. 64 bit machines usually have larger values. The constant PHP_INT_MAX is used to determine the maximum value.</p> <pre class="codeguru">say 'hi';</pre> Let us now look at how PHP determines the data type depending on the attributes of the supplied data. <pre class="codeguru">say 'hello';</pre> Floating point numbers <pre class="codeguru">say 'you r amazing';</pre> Character strings <pre class="codeNrun">say 'i am fine';</pre> <form class="hidden code-box" method="GET" name="sample"> <div dir="ltr"> <textarea class="php" name="codeguru"></textarea> </div> <input type="button" value="Run" /> <br/> <br/>Output: <br/> <br/> <textarea id="print-result4" disabled="true" cols="77"></textarea> <br/> </form> <form class="hidden code-box" method="GET" name="Nosample"> <div dir="ltr"> <textarea class="php" name="codeNrun"></textarea> </div> </form> </body> </html> Файл code.js:
$(document).ready(function () { var idIndex = 0; $('pre.codeguru').each(function () { var pre = this; var form = $('form[name=sample]').clone(); $(form).removeAttr('name'); $(form).removeClass('hidden'); $($(form).find('textarea')[0]).val($(pre).text()); var id = $(pre).attr('id'); $(form).find('div textarea[name=code]').first().attr('id', id); $(form).find('#print-result4').first().attr('id', 'print-result' + idIndex++); $(pre).replaceWith(form); }); var n = 0; $('input[type=button]').each(function () { $(this).click(function (x) { return function () { execute(x); }; }(n++)) }); window.editors = []; $('textarea[name=codeguru]').each(function () { window.editor = CodeMirror.fromTextArea(this, { lineNumbers: true, matchBrackets: true, mode: "perl", tabMode: "shift" }); editors.push(editor); }); $('pre.codeNrun').each(function () { var pre = this; var form = $('form[name=Nosample]').clone(); $(form).removeAttr('name'); $(form).removeClass('hidden'); $($(form).find('textarea')[0]).val($(pre).text()); var id = $(pre).attr('id'); $(form).find('div textarea[name=codeNrun]').first().attr('id', id); $(pre).replaceWith(form); }); window.editors = []; $('textarea[name=codeNrun]').each(function () { window.editor = CodeMirror.fromTextArea(this, { lineNumbers: true, matchBrackets: true, mode: "perl", tabMode: "shift" }); editors.push(editor); }); }); function execute(idx) { p5pkg.CORE.print = function (List__) { var i; for (i = 0; i < List__.length; i++) { document.getElementById('print-result' + idx).value += p5str(List__[i]) } return true; }; p5pkg["main"]["v_^O"] = "browser"; p5pkg["main"]["Hash_INC"]["Perlito5/strict.pm"] = "Perlito5/strict.pm"; p5pkg["main"]["Hash_INC"]["Perlito5/warnings.pm"] = "Perlito5/warnings.pm"; var source = editors[idx].getValue(); var pos = 0; var ast; var match; document.getElementById('print-result' + idx).value = ""; try { var start = new Date().getTime(); var js_source = p5pkg["Perlito5"].compile_p5_to_js([source]); var end = new Date().getTime(); var time = end - start; // run start = new Date().getTime(); eval(js_source); end = new Date().getTime(); time = end - start; } catch (err) { //document.getElementById('log-result').value += "Error:\n"; } }
так что теперь вы можете видеть, что есть два образца имен образцов и Nosample, как это
<form class="hidden code-box" method="GET" name="sample">
а также
<form class="hidden code-box" method="GET" name="Nosample">
и есть два типа pre-меток codeguru и codeNrun, как это
<pre class="codeguru">say 'you r amazing';</pre>
А также
<pre class="codeNrun">say 'i am fine';</pre>
Поэтому, когда я заменяю этот предварительный код формой, тогда, когда я пытаюсь запустить, тогда вывод печатается в другом текстовом поле, я не могу понять, почему это может произойти.
Есть дополнительные window.editors = []; в вашем коде.
Сначала вы создаете массив editors , затем нажимаете на него некоторые объекты CodeMirror, затем снова переопределяете editors в пустой массив … Просто удалите второй window.editors = []; линия.
Во-вторых: что такое значение переменной id здесь?
$(form).find('div textarea[name=code]').first().attr('id', id);
Вы читаете id textarea поля, но, похоже, он не undefined , поскольку в HTML нет id .
Подобная ошибка в этой строке:
$(form).find('div textarea[name=codeNrun]').first().attr('id', id);
Я думаю, что id должен быть здесь 'print-result3' , но теперь он не undefined .
Обратите внимание, что дополнительная цифра для тел id добавляется в порядке $('input[type=button]').each() предоставляет. Это должен быть порядок элементов в документе. Обратите внимание, что исходная button является последней, которую вы можете видеть на экране.
Я думаю, что в моем ответе отсутствовало объяснение, как настроить кнопку на редактор и соответствующий результат print-resultX . Я попытаюсь объяснить это здесь:
В исходном <input id="print-resultX" ... /> X должно быть количество итоговых входов print-result то есть количество объектов CodeMirror, поскольку, когда вы клонируете form , все клоны помещаются перед это оригинальный форма. Во время клонирования соответствующие X s добавляются в тело каждого значения id .
Это значение X передается функции execute(idx) в качестве аргумента idx , то есть нажатая кнопка «знает», какой редактор следует обрабатывать в execute() , поскольку X также представляет индекс в массиве editors .
При добавлении idx в тело (= 'print-result' ) id , вы можете настраивать действия в конкретном поле результата печати.