如何使用eventListener单击某个元素后如何获得返回值？

Question

// Im trying to make these variables have a string return value of their name using a function, as well as applying certain style changes all at once.

let airClick = document.querySelector('#Air').addEventListener
('click', getUserChoice);
let fireClick = document.querySelector('#Fire').addEventListener
('click', getUserChoice);
let waterClick = document.querySelector('#Water').addEventListener
('click', getUserChoice);

function getUserChoice() {

    function airAfterClick() {
        let air = document.querySelector('#Air')
        air.style.backgroundImage = "url('https://media1.giphy.com/media/RK7pdHVS4N7he/source.gif')";
        air.firstElementChild.style.opacity = 0.4;
        return "air"
    }

    function fireAfterClick() {
        let fire = document.querySelector('#Fire')
        fire.style.backgroundImage = "url('https://i.gifer.com/5NOX.gif')";
        fire.firstElementChild.style.opacity = 0.4;
        return "fire"
    }

    function waterAfterClick() {
        let water = document.querySelector('#Water')
        water.style.backgroundImage = "url('https://media2.giphy.com/media/kTEpI5N6y0bUA/source.gif')";
        water.firstElementChild.style.opacity = 0.4;
        return "water"
     }
}

所以我在这里要做的是，当用户单击播放器一侧的元素时，某些样式会激活，例如，将空气元素的背景更改为龙卷风的gif，一旦单击它，就像以及执行某些其他操作，更重要的是返回元素名称是什么的字符串值。这样，我可以将其用作返回值，然后与计算机的选择进行比较。

但是我不知道该怎么做，我不确定我是否正确格式化了我的代码。但是从我想在代码中尝试做的是，在getUserChoice函数中包含多个函数，一旦单击该函数，它将激活其中的任何函数。

如果我以正确的方式进行操作，我只会遇到一些麻烦。或者，如果有更简单的方法。

1。）如果我在函数中执行函数，我应该使用IF语句来激活函数，具体取决于单击的内容？那有可能吗？

2。）在getUserChoice函数内执行addEventListener会更有意义吗？

感谢你们的所有帮助！

Answer 1

像您一样嵌套功能有点一厢情愿。

我建议您委托-为容器提供容器的ID，为元素提供元素的类，然后执行此操作

const bgURLs = {
      "Air": "https://media1.giphy.com/media/RK7pdHVS4N7he/source.gif",
      "Fire": "https://i.gifer.com/5NOX.gif",
      "Water": "https://media2.giphy.com/media/kTEpI5N6y0bUA/source.gif"
    };

document.getElementById("container").addEventListener("click", function(e) {
  let tgt = e.target;
  if (tgt.classList.contains("element")) {
    tgt.style.backgroundImage = url(bgURLs[tgt.id]);
    tgt.firstElementChild.style.opacity = 0.4;
  }
})

Answer 2

我认为您在这里不需要多个功能。您可以将其传递给函数，然后在函数内部进行引用。

请注意：addEventListener的返回值是不确定的。

尝试以下方式：

let airClick = document.querySelector('#Air').addEventListener('click', function(){getUserChoice(this)});
let fireClick = document.querySelector('#Fire').addEventListener('click', function(){getUserChoice(this)});
let waterClick = document.querySelector('#Water').addEventListener('click', function(){getUserChoice(this)});

function getUserChoice(el) {
  var imageUrl = '';

  if(el.id == 'Air')
    imageUrl = 'https://media1.giphy.com/media/RK7pdHVS4N7he/source.gif';
  if(el.id == 'Fire')
    imageUrl = 'https://i.gifer.com/5NOX.gif';
  if(el.id == 'Water')
    imageUrl = 'https://media2.giphy.com/media/kTEpI5N6y0bUA/source.gif';
  el.style.backgroundImage = `url(${imageUrl})`;
  el.firstElementChild.style.opacity = 0.4;
}