时间戳

首页 > 解决方案 > 如何使用 EventListener 更改元素的值

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

问题描述

在这个程序中，我可以使用按钮添加输入，但我需要在每个输入更改时显示其长度。我可以使用 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 对其进行更新。长度

标签： javascripthtml

解决方案

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

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

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

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

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

然后您的代码应如下所示（注意：我设置了var count = 0;and 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>

推荐阅读