동적으로 생성 된 텍스트 영역의 ID 가져 오기

Question

동적으로 생성 된 여러 textAreas가 javascript through 루프에 있습니다. 나는 그것을 "readonly"만들고 문자열을 사용하여 다른 값을 설정했습니다. 이제는 원하는 모든 textArea를 클릭 할 때마다 함수를 호출해야합니다.이 함수에서는 클릭 된 텍스트 영역의 값을 표시하려고합니다. 이제 그 텍스트 ID를 클릭해야합니다. 나는 textarea.id를 통해 그것을 얻었지만 동적으로 생성 된 텍스트 영역의 마지막 ID를 보여줍니다. 이드를 얻는 데 15 개의 텍스트 영역을 만든 것처럼 나에게는 15 번째 ID가 표시됩니다.

var div = document.createElement("div"); 
div.setAttribute("style","margin-left:10px;width:750px;height:180px;background-image:url(images/questions_option_bg_2.png);position:relative;margin-top:15px"); 

textarea = document.createElement("textarea"); 
textarea.setAttribute('id', "textid"+i); 
textarea.setAttribute('readonly', 'readonly'); 
textarea.setAttribute("cols",35); 
textarea.setAttribute("rows",5); 
textarea.setAttribute("style","overflow:hidden;color: white; font-size: 30px;margin-left:10px;position:relative;margin-top:5px;background:transparent;border:thin;outline:none;"); 
textarea.value=all_sel_questions[(question_shuffled_array[i])]; 

div.appendChild(textarea); 
$("#third_div").append(div); 
textarea.addEventListener('click', clickonTextArea, false); 

function clickonTextArea() 
{ 
    var value=textarea.id; 
    alert(value); 
} 

Answer 1

사용 this 상황

function clickonTextArea(e) { 
    var value=this.id; 
    // OR 
    // var value = e.target.id; 
    alert(value); 
} 

textarea 당신이에 바인딩 한 마지막 텍스트 영역에 대한 참조를 보유하고 있습니다. 따라서 항상 사용자가 만든 인스턴스의 마지막 인스턴스를 가리 킵니다.

Answer 2

귀하의 이벤트 기능은 ... 이런 식으로해야

function clickonTextArea(e) 
{ 
    var e = e || window.event; 
    var ta = e.target || e.srcElement; 

    var value=ta.id; 
    alert(value); 
} 

Answer 3

이벤트 처리기에서 this을 통해 대상 텍스트 영역에 액세스 할 수 있습니다.

function clickonTextArea(event) { 
    var value = this.id; 
    alert(value); 
}