javascript - 使用 onClick 事件时函数仅执行一次 [javascript]

Question

我试图在每次单击带有 onclick 事件的按钮 (#angry) 后随机更改 div (#reaction-background) 的背景图像。但是，背景图像仅在单击按钮后更改一次。

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>