Функция выполняется только один раз при использовании события onClick [javascript]

Question

Я пытаюсь случайным образом изменить фоновое изображение div (# response-background) после каждого нажатия кнопки (#angry) с событием onclick. Однако фоновое изображение изменяется только один раз после нажатия кнопки.

HTML:

<div class="btn-list">
      <a id="angry">ANGRY</a>
      <div id="reaction-background"></div>

Javascript:

// array of pictures
var fileNamesReactions = [
  "angry1.jpg",
  "angry2.jpg",
  "angry3.jpg",
  "angry4.jpg",
  "angry5.jpg"
];
// random reaction index
var randomIndexReaction = Math.floor(Math.random() * fileNamesReactions.length);
// randomize pictures
document.getElementById("angry").onclick = function() {
  document.getElementById("reaction-background").style.background = "url(./img/reactions/angry/" + fileNamesReactions[randomIndexReaction] + ")";
  document.getElementById("reaction-background").style.backgroundRepeat = "no-repeat";
  document.getElementById("reaction-background").style.backgroundSize = "contain";
}

Answer 1

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

Вы необходимо переместить генератор случайных чисел в обратный вызов щелчка, чтобы новое случайное число генерировалось при каждом нажатии.

Кроме того, не используйте свойство onclick элемента для настройки обратного вызова. Хотя этот подход работает, он устарел, и вы должны использовать более надежный и стандартный метод .addEventListener() для настройки событий.

Кроме того, ваш стиль в CSS настолько можно и использовать CSS классов.

Собрать все вместе:

// array of pictures
var fileNamesReactions = [
  "angry1.jpg",
  "angry2.jpg",
  "angry3.jpg",
  "angry4.jpg",
  "angry5.jpg"
];

// Get your DOM references that you'll use repeatedly just once:
let backgroundElement = document.getElementById("reaction-background"); 

// randomize pictures
document.getElementById("angry").addEventListener("click", function() {
  // You have to get a new random each time the click occurs.
  var random = Math.floor(Math.random() * fileNamesReactions.length);
  backgroundElement.style.background = "url(./img/reactions/angry/" + fileNamesReactions[random] + ")";
  console.log(backgroundElement.style.background);
});

/* Use CSS classes as much as possible as they make code much simpler */
#reaction-background {
  background-size:"contain";
  background-repeat:"no-repeat";
}

<div class="btn-list">
      <a id="angry">ANGRY</a>
      <div id="reaction-background"></div>
</div>

Answer 2

Переместить оператор случайного числа в метод onclick, чтобы он генерировал новое число при каждом нажатии. Пожалуйста, найдите код ниже:

// array of pictures
var fileNamesReactions = [
  "angry1.jpg",
  "angry2.jpg",
  "angry3.jpg",
  "angry4.jpg",
  "angry5.jpg"
];

// randomize pictures
document.getElementById("angry").onclick = function() {

// random reaction index
var randomIndexReaction = Math.floor(Math.random() * fileNamesReactions.length);

  document.getElementById("reaction-background").style.background = "url(./img/reactions/angry/" + fileNamesReactions[randomIndexReaction] + ")";
  document.getElementById("reaction-background").style.backgroundRepeat = "no-repeat";
  document.getElementById("reaction-background").style.backgroundSize = "contain";
}