javascript - JS->从另一个函数访问变量(JS -> Accessing a variable from another function)

Question

I'm new to this site and to programming in general and I'm a bit stuck on a school assignment.(我是这个网站的新手，也是一般编程的新手，我对学校的工作有些困惑。)

For reference here is my code I'm currently working on: Pastebin(供参考，这是我目前正在使用的代码： Pastebin)

function initChests(){
  let gameChests = document.getElementById('chests');

  for(let i = 0; i < 3; i++) {
    let singleChest = document.createElement('img');
    singleChest.src = 'images/chest-closed.png';
    singleChest.alt = 'A chest'
    singleChest.style.marginRight = '20px';

    gameChests.appendChild(singleChest);
  }
}

function initChestEventListeners() {
  singleChest.addEventListener('click', chestClicked);
}

function chestClicked(e){
  console.log("hello");
}

Now to my problem.(现在到我的问题。)

What I want to do is access the variable singleChest in my initChestEventListeners function without making the variable global.(我想要做的是在我的initChestEventListeners函数中访问变量singleChest而不使变量成为全局变量。)

I am aware I can just put the singleChest addEventListener inside the initChests function, but that's not quite what I want to do either.(我知道我可以将singleChest addEventListener放在initChests函数中，但这也不是我想要的。)

I want to make it work with the function structure I have if possible.(如果可能，我想使其与我拥有的功能结构一起使用。)

Is this something that is possible and if so, can someone please explain what I would need to do or redirect me to a guide that could help explain the solution?(这是否可行？如果可以，有人可以解释一下我需要做什么，或者将我重定向到可以帮助解释解决方案的指南吗？)

Thank you in advance!(先感谢您！)

Kind regards.(亲切的问候。)   ask by Ted Nilsson translate from so

Answer 1

One option is to add an event listener to the parent element instead, the gameChests , and on click, if the clicked element is an img , do something with it:(一种选择是将事件侦听器添加到父元素gameChests ，并且在单击时，如果clicked元素是img ，请对其进行处理：)

 function initChests() { const gameChests = document.getElementById('chests'); for (let i = 0; i < 3; i++) { let singleChest = document.createElement('img'); singleChest.src = 'images/chest-closed.png'; singleChest.alt = 'A chest' singleChest.style.marginRight = '20px'; gameChests.appendChild(singleChest); } } function initChestEventListeners() { const gameChests = document.getElementById('chests'); gameChests.addEventListener('click', chestContainerClicked); } function chestContainerClicked(e) { if (!e.target.matches('img')) { return; } console.log("hello", e.target); } initChests(); initChestEventListeners(); 

 <div id="chests"></div> 

This method of watching for events that bubble up to the parent element is called event delegation.(这种监视冒泡到父元素的事件的方法称为事件委托。)