时间戳

首页 > 解决方案 > 在我使用 = innerHTML 更新 html 后，getElementByID.onchange 不起作用

javascript - 在我使用 = innerHTML 更新 html 后，getElementByID.onchange 不起作用

问题描述

我的起始 html 如下所示：

<label> Names: </label><br>
<input type="text" class="form-control name" placeholder="name1" id="name1" name ="name1"><br>

我有一个捕获 html 的变量：

var html =   "<label> Names: </label><br><input type=\"text\" class=\"form-control name\" placeholder=\"name1\" id=\"name1\" name =\"name1\"><br>"

然后我有一个 onchange 运算符，当第一行中有文本时，它会执行几个函数。.onchange 第一次被很好地拾取并运行后续功能。我最终得到了一个额外的行：

for (n = 1; n < inputLength+1 ; ++n) {
    var test2 = document.getElementById(dude+n);
    test2.onchange = forFunction
    }

  function forFunction() {
    for (m = 1; m < inputLength+1 ; ++m) {
      var test = document.getElementById(dude+m)
      if (test.value != "") {
        var txt = "<input type=\"text\" class=\"form-control name\" placeholder="+dude+(m+1)+" id="+dude+(m+1)+" name="+dude+(m+1)+"><br>";
        document.getElementById('group_names').innerHTML = updateHTML(txt);
        //function updateHTML(txt)
      }
    }
  }

  var html =   "<label> Names: </label><br><input type=\"text\" class=\"form-control name\" placeholder=\"name1\" id=\"name1\" name =\"name1\"><br>"
  function updateHTML(txt) {
    html = html + txt;
    return html;
  }

问题是，在完成所有这些之后，我最终会根据需要得到两个输入行：name1 和 name2。但是，当我第二次在这些字段中输入文本时，.onchange 不会被拾取。但是当我检查和查看 html 时，这些元素在 html 中。

另外，当我

console.log(inputFormDiv.getElementsByTagName('input').length);

在我第一次运行函数后（在我第一次更改输入字段中的值时），输入的长度从 1 增加到 2，以便正确识别，而不是 .onchange。

想法？

标签： javascriptonchangeinnerhtmlgetelementbyid

解决方案

仅当添加到 html 上的属性并且用户单击文本框时，onchange才会起作用，例如：

<input onchange="forFunction()" type="text" class="form-control name" placeholder="name1" id="name1" name ="name1">

在 JavaScript 代码中添加 onchange 事件。将更改事件添加到addEventListener例如：

var test2 = document.getElementById(dude+n);
test2.addEventListener('change', forFunction, false)

但是，如果您希望在用户键入键时触发事件，请使用keypress事件。例如：

 var test2 = document.getElementById(dude+n);
 test2.addEventListener('keypress', forFunction, false

一个基本的例子：https ://jsfiddle.net/xrL6y012/1/

推荐阅读