jQuery에서 잡히지 않은 ReferenceError

Question

bbcode를 텍스트 영역에 삽입하려면 버튼을 클릭하십시오. 콘솔 경고 : "잡히지 않은 ReferenceError : myTextarea가 정의되지 않았습니다." 이 문제를 해결하도록 도와 주시겠습니까?

$(function(){ 
function formatText(el,tagstart,tagend){ 
var selectedText=document.selection?document.selection.createRange().text:el.value.substring(el.selectionStart,el.selectionEnd);// IE:Moz 
var newText='['+tagstart+']'+selectedText+'[/'+tagend+']'; 
if(document.selection){//IE 
el.focus(); 
var st=getCaret(el)+tagstart.length+2; 
document.selection.createRange().text=newText; 
var range=el.createTextRange(); 
range.collapse(true); 
range.moveStart('character', st); 
range.moveEnd('character',selectedText.length); 
range.select(); 
el.focus(); 
} 
else{//Moz 
var st=el.selectionStart+tagstart.length+2; 
var end=el.selectionEnd+tagstart.length+2; 


el.value=el.value.substring(0,el.selectionStart)+newText+el.value.substring(el.selectionEnd,el.value.length); 
    el.focus(); 
    el.setSelectionRange(st,end) 
    } 
    } 
function getCaret(el) { // IE mission is tricky :) 
    el.focus(); 
    var r = document.selection.createRange(); 
    if (r == null) { 
     return 0; 
    } 
    var re = el.createTextRange(), 
    rc = re.duplicate(); 
    re.moveToBookmark(r.getBookmark()); 
    rc.setEndPoint('EndToStart', re); 

    var add_newlines = 0; 
    for (var i=0; i<rc.text.length; i++) { 
     if (rc.text.substr(i, 2) == '\r\n') { 
     add_newlines += 2; 
     i++; 
     } 
    } 
return rc.text.length + add_newlines; 
} 
$("elements").after('<form action="/post" method="post" name="myForm"><textarea placeholder="Comments..." name="myTextarea"></textarea><span class = "repbbcode" title = "Bold" value="b" style="font-weight:bold" >B</span></form>'); 
$(".repbbcode").on("click" , function(){ 
formatText(myTextarea,'b','b'); 
}); 
}); 

Answer 1

$(".repbbcode").on("click" , function(){ 
    formatText(myTextarea,'b','b'); 
       ^^^^^^^^^^ 
}); 

를 myTextArea이 정의되지 않은 :

가 나는 코드가 있습니다. 코드에는

var myTextarea = .... 

이 없습니다. 당신은 코드 줄에서

$(".repbbcode").on("click" , function(){ 
    var myTextarea = $("[name='myTextarea']).get(0); 
    formatText(myTextarea,'b','b'); 
}); 

Answer 2

같은 뭔가가 필요 :

formatText(myTextarea,'b','b'); 

당신은 첫 번째 인수 DOM 요소로 전달할 수 있습니다. DOM 요소의 이름을 전달할 수는 없습니다. document.getElementById("myTextArea")을 사용하고 요소에 id="myTextArea"을 설정하는 것이 가장 쉽습니다.

그래서 텍스트 영역 HTML은 <textarea id="myTextArea" ...>이됩니다.

그리고, 코드는 다음과 같습니다

이

var textareaElement = document.getElementsByName("myTextArea")[0]; 
formatText(textareaElement,'b','b'); 

여기에서 다른 것은 : 당신이 이름으로 DOM 요소를 얻고 싶은 경우에

var textareaElement = document.getElementById("myTextArea"); 
formatText(textareaElement,'b','b'); 

---

, 당신도 그렇게 할 수 있습니다 document.getElementsByName()은 잠재적으로 여러 요소의 목록을 반환하므로 [0]으로 그 목록에 도달해야 목록의 첫 번째 항목이 함수로 전달됩니다.

---

이름, 클래스, ID 등을 사용하는 여러 가지 방법이 있습니다. 일반적으로 페이지에서 하나의 고유 한 요소를 얻으려면 ID를 부여하고 document.getElementById() 또는 jQuery에 해당하는 요소를 사용합니다.

Answer 3

당신은 var myTextarea = document.getElementsByName('myTextarea')[0];

$(".repbbcode").on("click" , function(){ 
     var myTextarea = document.getElementsByName('myTextarea')[0]; // added myTextarea 
     formatText(myTextarea,'b','b'); 
});