我有两个文件
- index.php
- 代码.js
我在index.php中有一些代码，其中包含表单并在code.js的帮助下。我正在用该表单替换 pre 标签。所以一切都运行良好。为了理解我的问题，你必须查看我的代码。 所以首先我给出我的代码
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 e.g. -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";
}
}
现在你可以看到有两个表单名称为sample和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 ，因为没有 id HTML 中的 s。
这一行有类似的错误:
$(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 ) ，您可以将操作定位到特定的打印结果字段。
关于php - 表单替换为文本区域不会给出不同的输出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17593726/