2013-07-09 2 views
1

내가 및 2) index.php에 두 개의 파일 1)텍스트 영역의 가치를 어떻게 얻을 수 있습니까?

을 code.js이

<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
<link href="http://web.guru99.com/lib/codemirror.css" rel="stylesheet" /> 
<script type="text/javascript" src="code.js"></script> 
<style type="text/css"> 
    .CodeMirror { 
    border: 1px solid #eee; 
    height: auto; 
} 
.CodeMirror-scroll { 
    height: auto; 
    overflow-y: hidden; 
    overflow-x: auto; 
} 
</style> 
</head> 
<body> 
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">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="codeguru">say 'i am fine';</pre> 
</div> 
<form class="hidden code-box" method="GET" name="sample"> 
<div dir="ltr"><textarea class="php" name="codeguru"></textarea></div> 
<input type="submit" value="Run" onclick="execute();"/> 
</br></br> 
Output:</br></br> 
    <textarea id="print-result" disabled="true" cols="77"></textarea></br> 
</form></div> 
</body> 
</html> 

및 code.js 파일이 코드가

아래에 주어진다 포함 아래

지금의 index.php의 코드는

$(document).ready(function() 
{ 
    $('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); 
     $(pre).replaceWith(form); 
     }); 
     window.editors = []; 
     $('textarea[name=codeguru]').each(function() 
     { 
      window.editor = CodeMirror.fromTextArea(this, 
      { 
       lineNumbers: true, 
       matchBrackets: true, 
       mode: "application/x-httpd-perl", 
       tabMode: "shift" 
      }); 
       editors.push(editor); 
     }); 

}); 
function execute() { 
      p5pkg.CORE.print = function(List__) { 
       var i; 
       for (i = 0; i < List__.length; i++) { 
        document.getElementById('print-result').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 = editor.getValue(); 
      alert(source); 
      var pos = 0; 
      var ast; 
      var match; 
      document.getElementById('print-result').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"; 
        } 
     } 

모든 것이 내 코드에서 잘 실행됩니다. code.js의 pre 태그는 textarea로 대체되고이 프로젝트는 온라인 펄 에디터이기 때문에 텍스트 영역의 코드를 실행해야합니다. 그래서 지금 내 문제는 내가이 코드에 의해 텍스트 영역의 값을 경고했다

var source = editor.getValue(); 
      alert(source); 

하지만 그 빈 팝업을 제공합니다. 그래서 내가 textarea의 현재 값을 검색하기 위해해야 ​​할 일은 무엇입니까?

+1

jQuery가 맞습니까? 'editor.val();'(편집기가 당신의 dom 객체 인 경우)를 시도 했습니까? –

+0

왜 js/jq 문법이 너무 녹고 있습니까? BTW, 왜 그것을 사용 :'$ ($ (form) .find ('textarea') [0])'? 코드를 읽을 수 없습니다 ... 그리고 문제와 관련된 코드 만 게시하십시오 –

+0

어떨까요? 'var source = editor.html();'? – Faridzs

답변

0

이 코드에는 하나 이상의 편집기가 생성되었습니다. 이들은 editors 배열에 저장되어있는 것 같습니다. 이제 버튼을 클릭하여 execute()을 실행하려고하지만 JS를 말하지 않고 편집기 값으로 경고하고 싶습니다.

페이지의 첫 번째 편집기의 값

는 다음과 같이 접근 할 수 있습니다 :

var source = editors[0].getValue(); 

editor.getValue()가 당신에게 editors 배열의 마지막 편집기의 값을 제공 할 예정이다.

각 편집기마다 별도의 버튼이 있기 때문에 editors 배열의 편집기 색인을 execute() 함수로 전달할 수 있습니다.

우선

다음 버튼 입력의 onclick 특성을 제거 :

var n = 0; 
$('input[type=button]').each(function() { 
     $(this).click(function (x) { 
      return function() { 
       execute(x); 
      }; 
     }(n++)) 
    } 
); 

을 그리고 execute()에서 :

$('pre.codeguru').each(); 후, 버튼에 이벤트 리스너를 부착

function execute(idx) { 
     ... 
    var source = editors[idx].getValue(); 
    alert(source); 
     ....  
} 

업데이트

는 해당 필드에 출력 바이올린 코드를 업데이트했습니다.

그리고 여기가 an updated live demo입니다.

+1

네가 맞습니다. 나는 이것을 시도하고 첫 번째 편집자의 가치를 얻었다. 그래서 현재의 텍스트 영역의 가치를 어떻게 얻을 수 있는지 생각 해보세요. –

+0

고마워 형제는 내 대답을 얻었지만 여전히 한 가지 문제가 있습니다. 편집기의 출력은 첫 번째 텍스트 영역에 저장됩니다. 너는 어떤 생각을 가지고 있니? –

+0

@ user2372214 동일한 'id'즉 'print-result'를 가진 다섯 개의'textareas'를 본 것처럼 보입니다. 각'id'의 끝에 숫자를 추가하여 다른'id'를 생성해야합니다. 그런 다음'document.getElementById ('print-result'+ idx) .value + = p5str (List __ [i])'와 같은 것을 사용할 수 있습니다. – Teemu

관련 문제