Question

我正在使用JavaScript动态地向表中添加行，我在每行中创建了一些文本框，我在其中一个文本框中添加了一个onkeyup事件：

               var myTotal = "1";
           var spanTotal = document.createElement("span");
           spanTotal.innerHTML = "<input style=\"width:50px\" type=\"text\" name=\"total\" value=" + myTotal + ">";


spanCount.onkeyup = function ()
{
alert(spanTotal.innerHTML);
    };

然后我将此span（呈现为HTML文本框）添加到我的表行。我想拥有动态创建的文本框的值，但每当我更改此文本框时，此文本框的初始值将显示在警告框中（即1）。此文本框的初始值为“1”，但是当我更改它时（例如在文本框中键入0），再次在警告框中显示“1”。我想拥有动态创建的文本框的价值，我应该为我的跨度提供ID吗？我该如何定义spanCount.onkeyup函数？应该在哪里定义，以便我可以拥有此文本框的确切值？

Answer 1

我创建了jsFiddle。您可以使用childNodes获取输入框的值。您使用的代码中存在其他问题spanCount而不是spanTotal。

修改后的代码：

var myTotal = "1";
var spanTotal = document.createElement("span");
spanTotal.innerHTML = "<input style=\"width:50px\" type=\"text\" name=\"total\" value=" + myTotal + ">";
document.body.appendChild(spanTotal);

spanTotal.onkeyup = function() {
    alert(spanTotal.childNodes[0].value);
};

Answer 2

以下修改后的代码可以解决您的问题：

var myTotal = 1;

/* object creation */
var span = document.createElement('span');

var input = document.createElement('input');
input.setAttribute('type', 'text');
input.setAttribute('name', 'total');
input.setAttribute('style', 'width:50px;');
input.setAttribute('value', myTotal);

// append each object to respective container
span.appendChild(input);
document.appendChild(span);

/* event handler */
input.onkeyup = function(){
  alert(this.value);
}

使用JavaScript获取动态创建的文本框的价值

2 个答案: