表格替换为textarea不会给出不同的输出 [英] form replaced to textarea not give different output
问题描述
我有两个文件
- index.php
- code.js
在index.php中我有一些代码，其中包含表单并在code.js的帮助下.我正在用该表格替换pre标签.因此，一切运行正常.为了理解我的问题，您必须查看我的代码. 所以首先我要提供我的代码
I have some code in index.php which contains forms and with the help of code.js. I am replacing pre tag with that form. So everything runs fine. For understand my problem you have to see my code. So first of all I am giving my code
index.php文件:
index.php file:
<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文件:
code.js file:
$(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
so now you can see that there are two forms names sample and Nosample like this
<form class="hidden code-box" method="GET" name="sample">
和
<form class="hidden code-box" method="GET" name="Nosample">
像这样的preg标签有两种类型:codeguru和codeNrun
and there are two types of pre tags codeguru and codeNrun like this
<pre class="codeguru">say 'you r amazing';</pre>
还有
<pre class="codeNrun">say 'i am fine';</pre>
因此，当我用表单替换该预代码时，然后尝试运行时，输出将输出到另一个textarea中，我无法理解为什么会发生这种情况.
So when I am replaced this pre code with form then when I am trying to run then the output is print in another textarea I cant understand why this can be happened.
推荐答案
您的代码中还有一个window.editors = [];.
首先，创建一个editors数组，然后将其推送到一些CodeMirror对象，然后再次将editors重新定义为一个空数组...只需删除第二条window.editors = [];行.
At first you create an editors array, then push it some CodeMirror objects, then you redefine editors to an empty array again... Just remove the second window.editors = []; line.
第二:这里id变量的值实际上是什么?
Secondly: what actually is the value of id variable here?
$(form).find('div textarea[name=code]').first().attr('id', id);
您正在阅读textarea的id，但是看起来像是undefined，因为HTML中没有id.
You're reading the id of the textarea, but looks like it's undefined, since there are no ids in the HTML.
此行中的类似错误:
$(form).find('div textarea[name=codeNrun]').first().attr('id', id);
我猜这里id应该是'print-result3'，但是现在是undefined.
I guess id should be 'print-result3' here, but it is undefined now.
注意，id正文的附加数字按$('input[type=button]').each()提供的顺序添加.这应该是文档中元素的顺序.请注意，原始的button是您在屏幕上看到的最后一个.
Notice, that the additional digit to id's bodies are added in the order $('input[type=button]').each() provides. This supposed to be the order the elements in the document have. Notice, that the original button is the last you can see on the screen.
我认为我的答案缺少解释，即如何将按钮定位到编辑器和相应的print-resultX.我会在这里解释一下:
I think there was a lack of explanation in my answer, how to target the button to an editor and corresponding print-resultX. I'll try to explain it here:
在原始的<input id="print-resultX" ... /> X中应该有许多print-result的输入，即许多CodeMirror对象，因为克隆form时，所有克隆都放置在此原始格式之前.克隆期间，将相应的X添加到每个id值的正文中.
In the original <input id="print-resultX" ... /> X should be a number of total print-result inputs i.e. a number of the CodeMirror objects, since when you're cloning the form, all clones are placed before this original form. During cloning corresponding Xs are added to the body of the each id value.
此X值作为参数idx传递给execute(idx)函数，即单击的按钮知道"，应该在execute()中处理该编辑器，因为X还在execute()中表示索引. editors数组.
This X value is passed to execute(idx) function as an argument idx, i.e. the clicked button "knows", which editor should be handled in the execute(), since X also represents an index in the editors array.
将idx添加到id的正文(= 'print-result')时，可以将操作定位到特定的打印结果字段.
When adding idx to the body (= 'print-result') of the id, you can target actions to the specific print-result field.
这篇关于表格替换为textarea不会给出不同的输出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
