从函数访问元素答案

【问题标题】：Access elements from a function从函数访问元素
【发布时间】：2022-02-10 17:48:55
【问题描述】：

我想知道有没有一种方法可以访问从函数创建的元素。我正在尝试为创建的每个元素设置一个点击事件，但我无法让它工作。提前致谢

function createDuck() {
  let newDuck = document.createElement("div");
  newDuck.classList.add("duck");
  randomPosition(newDuck);
  body.appendChild(newDuck);
  return newDuck;
};

const ducks = document.querySelectorAll("duck");
 
ducks.forEach(function (item) {  
  item.addEventListener("click", () => {
    item.classList.add("shot");
  });
 });

【问题讨论】：

标签： javascript html css dom element

【解决方案1】：

以下解决方案将事件侦听器添加到动态创建的 <div> 元素，并应用了类样式 .duck。

let body = document.getElementsByTagName("body")[0];
let button = document.getElementById('create');
let ducks = document.querySelectorAll("duck");
let counter = 0;

/* This function is used to create a new item. */
function createDuck() {
  let newDuck = document.createElement("div");
  newDuck.innerHTML = counter++;
  newDuck.classList.add("duck");
  body.appendChild(newDuck);
  return newDuck;
};

/* This method checks if the element applies a class style. */
function hasClass(elem, className) {
  return elem.className.split(' ').indexOf(className) > -1;
}

/* This event listener triggers new item creation. */
button.addEventListener('click', function() {
  createDuck();
});

/* The following item adds an event listener to the dynamically created item. */
document.addEventListener('click', function (e) {
  if(hasClass(e.target, 'duck')) {
    e.target.classList.add('shot');
  }
}, false);

.duck {
  color: red;
  border: 1px solid blue;
  margin-top: 10px;
  cursor: pointer;
}

.shot {
  background-color: yellow;
}

<body>
  <button id="create">Create</button>  
</body>

^{1 - Event binding on dynamically created elements?}

【讨论】：

【解决方案2】：

你调用 "createDuck()" 无处可去。调用后 element 就可用了。

【讨论】：