javascript - 如何使用 EventListener 更改元素的值

Question

在此程序中，我可以使用按钮添加输入，但我需要显示每个输入变化时的长度。我可以使用 EventListener 获取长度，但我不确定如何更改任何新创建的按钮的文本值。

在第 12 行，您可以看到我能够在第一个输入上成功更改值，但我使用的是 html 变量。如果您查看我的 addCell() 函数，您会发现我有一个元素作为每个节点的子元素来跟踪每个输入的长度。我需要在 Change() 函数中访问该元素，以便可以将 event.target.value.length 设置为相应的节点子元素。

我尝试过使用它，设置 var x = this 并且我尝试使用 event.target 属性来查找相应的节点甚至innerHTML。

var i = 0;
var count = 1;
var length = 2;
var chars = 0;

document.addEventListener('input', function (evt) {
  change(evt);
});

function change(elem) {
  var check = document.getElementById("first");
  if (event.target == check) {
    document.getElementById("len").innerHTML = event.target.value.length;
    return;
  }

  // Here's where I'm stuck

}

function removeCell() {
  if (count <= 1) {
    alert("Illegal operation, the police have been notified.")
    return;
  }
  var elem = document.getElementById('main');
  elem.removeChild(elem.lastChild);
  count = count - 1;
  length = length - 1;
}

function addCell() {
  var node = document.createElement('div');
  node.innerHTML += length;
  var inp = document.createElement('INPUT');
  var size = document.createElement('size');

  inp.setAttribute("type", "text");
  node.appendChild(inp);
  node.appendChild(size);
  document.getElementById('main').appendChild(node);

  count += 1;
  length += 1;
  i += 1;
}

#area {
  width: 585px;
  background-color: lightgrey;
  color: black;
  border-style: solid;
  margin-left: auto;
  margin-right: auto;
  min-height: 100px;
  height: auto
}
#texts {
  width: 220px;
  height: 50px;
  border-style: solid;
}
body {
  background-color: grey;
}

<div id="area">
  <form id="main">
    <pre><b>          input </b>          length</pre>
    <span id="list">
      1<input type="text" id="first"> <var id="len"></var>
    </span>

  </form>
  <br />
  <button onclick="addCell()">Add Cell</button>
  <button onclick="removeCell()">Remove Cell</button>
  <button onclick="sort()">Sort</button>
</div>

由于我能够使用alert()在每次更改时显示每个新创建的输入的正确长度，因此我知道有一种方法可以访问我创建的“size”元素以使用event.target更新它.value.length

Answer 1

您的问题是您使用“全局”输入事件监听器，并且您的 change() 函数未编程为处理多个输入字段，因为您在其中首先查询已知元素 id 和len。

如果您想使用全局监听器，则必须告诉您的 change() 函数如何访问新输入和相应的目标字段。

一种更简单的方法是修改 addCell() 函数并将事件监听器附加到您正在创建的输入字段，而不是使用全局监听器。因此，每个输入字段都拥有自己的事件监听器。由于输入字段和显示输入值长度的 size 元素都是在同一范围内创建的，因此您可以轻松地将长度写入相应的 size 元素。

inp.addEventListener('input', function(){
  size.innerText = inp.value.length;
});

如果您希望它与您提供的 HTML 一起使用，您需要删除第一个输入字段并手动调用 addCell() 以便呈现您的初始输入。

您的代码应如下所示(注意:我设置了 var count = 0; 和 var length = 1;):

var i = 0;
var count = 0;
var length = 1;
var chars = 0;

function removeCell() {
  if (count <= 1) {
    alert("Illegal operation, the police have been notified.")
    return;
  }
  var elem = document.getElementById('main');
  elem.removeChild(elem.lastChild);
  count = count - 1;
  length = length - 1;
}

function addCell() {
  var node = document.createElement('div');
  node.innerHTML += length;
  var inp = document.createElement('INPUT');
  var size = document.createElement('size');

  inp.setAttribute("type", "text");
  inp.addEventListener('input', function(){
    size.innerText = inp.value.length;
  });
  node.appendChild(inp);
  node.appendChild(size);
  document.getElementById('main').appendChild(node);

  count += 1;
  length += 1;
  i += 1;
}

addCell();

#area {
  width: 585px;
  background-color: lightgrey;
  color: black;
  border-style: solid;
  margin-left: auto;
  margin-right: auto;
  min-height: 100px;
  height: auto
}
#texts {
  width: 220px;
  height: 50px;
  border-style: solid;
}
body {
  background-color: grey;
}

<div id="area">
  <form id="main">
    <pre><b>          input </b>          length</pre>
    <span id="list"></span>
  </form>
  <br />
  <button onclick="addCell()">Add Cell</button>
  <button onclick="removeCell()">Remove Cell</button>
  <button onclick="sort()">Sort</button>
</div>