Как получить возвращаемое значение после нажатия на определенный элемент, используя 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.) Было бы разумнее вместо этого использовать addEventListener внутри функции getUserChoice?

Спасибо, ребята, за помощь!

Answer 1

Вместо этого вы можете передать анонимную функцию обработчику события, вызвать ваш метод, который возвращает значение, и использовать его соответствующим образом

function airClick()
  {
    var ele = document.getElementById("Air");
    ele.addEventListener("click", function(event){
    var result = getUserChoice(event);

    // result is your return value
  }, false);

  }

Answer 2

Лучше поделиться работой небольшой функции.

1. Добавлен отдельный объект с картинками.

2. При нажатии на элемент Вы отправляете элемент, на который нажали e.target, и значение равно fire, wather или air

3. При обработке щелчка вы вызываете функцию, которая заменяет фон, а затем отправьте данные на сервер.

backgrounds = {
	'air': "url('https://media1.giphy.com/media/RK7pdHVS4N7he/source.gif')",
	'fire': "url('https://i.gifer.com/5NOX.gif')",
	'water': "url('https://media2.giphy.com/media/kTEpI5N6y0bUA/source.gif')"
}

let airClick = document.querySelector('#Air').addEventListener('click', function(e) {getUserChoice(e.target, 'air')});
let fireClick = document.querySelector('#Fire').addEventListener('click', function(e) {getUserChoice(e.target, 'fire')});
let waterClick = document.querySelector('#Water').addEventListener('click', function(e) {getUserChoice(e.target, 'water')});

function getUserChoice(el, type) {

	function setBackground(el, type) {
	  el.style.backgroundImage = backgrounds[type];
	  // el.firstElementChild.style.opacity = 0.4;
	}

	function sendDataToServer(type) {
		console.log('send ' + type + ' to computer');
	}

	setBackground(el, type);
	sendDataToServer(type);
}

.elements{
  display: flex;  
}
.elements div {
  width: 100px;
  height: 100px;
  background-size: cover;
}

<div class="elements">
  <div id="Air">Air</div>
  <div id="Fire">Fire</div>
  <div id="Water">Water</div>
</div> 

Answer 3

Я предлагаю вам делегировать - присвойте контейнеру идентификатор контейнера, присвойте элементам класс элемента и сделайте это

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>

Answer 4

Добавление только небольшого изменения в существующий код:

// 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().airAfterClick);
let fireClick = document.querySelector('#Fire').addEventListener('click', getUserChoice().fireAfterClick);
let waterClick = document.querySelector('#Water').addEventListener('click', getUserChoice().waterAfterClick);

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"
  }

  return {
    airAfterClick,
    fireAfterClick,
    waterAfterClick
  }

}

<button id="Air">
<p>
Air
</p>
</button>
<button id="Fire">
<p>
Fire
</p>
</button>
<button id="Water">
<p>
Water
</p>
</button>

Вам необходимо вернуть внутренние функции из основной функции getUserChoice, чтобы ее можно было прослушивать с помощью click listeners в кнопках.

Answer 5

Я думаю, вам здесь не нужно несколько функций. Вы можете передать это функции и обратиться к ней внутри функции.

Обратите внимание: возвращаемое значение 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;
}