イベントリスナーを使用して、特定の要素をクリックした後、戻り値を取得するには？

Josemari・バウティスタ：

// 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の内部を行うにはより多くの意味を作りますか？

Uにすべての助けをみんなありがとう！

mplungjan：

私はあなたが委任示唆 - 、コンテナにコンテナの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;
  }
})

#container {
  display: flex;
}

.element {
  width: 100px;
  height: 100px;
  background-size: cover;
}

.element>span {
  color: orange
}

<div id="container">
  <div id="Air" class="element"><span>Air</span></div>
  <div id="Fire" class="element"><span>Fire</span></div>
  <div id="Water" class="element"><span>Water</span></div>
</div>