javascript - 获取动态创建的文本区域的 id

Question

我通过循环在javascript中动态创建了多个textAreas。我将其设为“只读”并使用字符串设置不同的值，现在我希望每当单击任何 textArea 时都应调用一个函数。现在在此函数中，我想显示单击的 textarea 的值。现在，我需要点击 textarea 的 id。我通过 textarea.id 得到它，但它显示了动态创建的 textarea 的最后一个 id。就像我创建了 15 个文本区域然后在获取 id 时它显示我第 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

this您可以通过事件处理程序访问目标文本区域。

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

Answer 3

你的事件函数应该是这样的......

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

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