如何将错误打印到div标签?

时间:2013-07-13 09:40:03

标签: php javascript jquery html codemirror

我有两个文件 index.php和code2.js

在inde.php中我定义了四个这样的预标签

<pre class="codeguru">hsduic</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>

在code2.js的帮助下,我用textarea替换了那个pre标签。并使用此textarea运行perl.now的代码一切正常,但我已经定义错误代码不起作用。 所以我给你index.php和code2.js的完整代码 的index.php

<html>
<head>
        <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="code2.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.
<pre class="codeguru">hsduic</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="codeNrun"></textarea>
    </div>
    <div class="hint">This code is editable. Click Run to execute.</div>
    <input type="button" value="Run" />
    <br/>
    <br/>Output:
    <div id="print-result4" disabled="true" cols="77"></div>
    <br/>Log:</br>
    <div id="log-result" disabled="true" cols="70"></div>
</form>
<form class="hidden code-box" method="GET" name="Nosample">
    <div dir="ltr">
        <textarea class="php" name="codeNrun"></textarea>
    </div>
</form>
</body>
</html>

和code2.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);
    });
      $('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);
    });
    var n = 0;
    $('input[type=button]').each(function () {
        $(this).click(function (x) {
            return function () {
                execute(x);
            };
        }(n++))
    });
});

function execute(idx) {
    p5pkg.CORE.print = function (List__) {
        var i;
        for (i = 0; i < List__.length; i++) {
          document.getElementById('print-result' + idx).innerHTML += p5str(List__[i]);
        }
        return true;
    };
    p5pkg.CORE.warn = function(List__) {
                var i;
                List__.push("\n");
                for (i = 0; i < List__.length; i++) {
                document.getElementById('log-result'+idx).innerHTML += 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).innerHTML = "";
    document.getElementById('log-result' + idx).innerHTML   = "";
    try {
        document.getElementById('log-result' + idx).innerHTML += "Compiling.\n";
        var start = new Date().getTime();
        var js_source = p5pkg["Perlito5"].compile_p5_to_js([source]);
        var end = new Date().getTime();
        var time = end - start;
        document.getElementById('log-result' + idx).innerHTML +=  "Compilation time: " + time + "ms\n";
        // run
        start = new Date().getTime();
        eval(js_source);
        end = new Date().getTime();
        time = end - start;
        document.getElementById('log-result' + idx).innerHTML += "Running time: " + time + "ms\n";
    } catch (err) {
        document.getElementById('log-result' + idx).innerHTML += "Error:\n";
        document.getElementById('log-result' + idx).innerHTML += err + "\n";
        document.getElementById('log-result' + idx).innerHTML += "Compilation aborted.\n";
    } 
}

我在log-result中打印错误但我不能。请帮我这样做。 这是现场演示,以帮助理解我的问题。点击这里进行现场演示 http://jsfiddle.net/Sanjayrathod/PknGC/1/

1 个答案:

答案 0 :(得分:0)

你没有改变“log-result”的id,你只是为了打印结果:

$(form).find('#print-result4').first().attr('id', 'print-result' + idIndex++);

所以添加这样的一行:

$(form).find('#log-result').first().attr('id', 'log-result' + idIndex++);