Question

我想创建一个简单的待办事项列表应用程序，我创建了从输入框获取值的函数，并且在函数内部创建了复选框附近的文本，现在我想创建将在每次单击复选框时执行的函数。由于当文档加载我收到错误时页面上没有复选框，我怎样才能使其正常工作？

这是我的代码：

var btn = window.document.getElementById("btn");
var result = window.document.getElementById("result");

function getValue() {
  var input = window.document.getElementById("input").value;
  var checkbox = document.createElement('input');
  checkbox.type = 'checkbox';
  checkbox.className = 'checkbox';
  result.appendChild(checkbox);
  result.innerHTML += input + "<br>";

}

var checkbox = document.getElementById('checkbox');

btn.addEventListener('click', getValue);
checkbox.addEventListener('click', function(){
  alert("Clicked");
});

<input type="text" id="input">
<input type="button" value="Submit" id="btn">

<div id="result">

</div>

Answer 1

这就是它的制作方式。

创建复选框后，您需要移动addEventListener。

此外，您需要使用createTextNode，因为使用innerHTML会分离addEventListeners（1）。出于同样的原因，您需要将appendChild移到函数的底部。

var btn = window.document.getElementById("btn");
var result = window.document.getElementById("result");

function getValue() {
  var input = window.document.getElementById("input").value;
  var checkbox = document.createElement('input');
  checkbox.type = 'checkbox';
  checkbox.addEventListener('click', function(){
    alert("Clicked");
  });
  text = document.createTextNode(input);
  result.appendChild(checkbox);
  result.appendChild(text);
}

var checkbox = document.getElementById('checkbox');

btn.addEventListener('click', getValue);

<input type="text" id="input">
<input type="button" value="Submit" id="btn">

<div id="result">

</div>

Answer 2

不幸的是，我不在我的电脑附近，也无法输入代码示例。我假设您希望新添加的复选框在您单击时调用函数？为此，您需要在创建新复选框后将其添加到新复选框。您可以在创建新复选框（getValue）的函数中执行此操作。

如果我说的不清楚，我稍后会给你写一个代码示例。

如何点击按钮点击动态创建的元素？

2 个答案: