Question

我通过循环在javascript中动态创建了多个textAreas。我把它设为“readonly”并使用字符串设置不同的值现在我希望每当点击任何textArea时，应该调用一个函数。现在我希望显示clicked textarea的值。现在我需要点击textarea的id。我通过textarea.id得到它，但它显示了动态创建的textareas的最后一个id。就像我创造了15个textareas然后获得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保留对您绑定的最后一个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);
}

获取动态创建的textareas的ID

3 个答案: