Function executes only once when using onClick event [javascript]

Question

I am trying to randomly change background image of a div (#reaction-background) after every click of a button (#angry) with onclick event. However, the background image only changes once after clicking the button.

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

Scott Marcus · Accepted Answer · 2020-03-15 20:50:49Z

Your click event handler is, in fact, running every time you click. The problem is that you are only generating a random number once, before any clicks happen and so you set the background image once and further clicks just set the same image over and over.

You need to move the random generator inside of the click callback so that a new random number is generated upon each click.

Also, don't use the onclick property of the element to set up the callback. While this approach works, it's outdated and you should use the more robust and standard .addEventListener() method to set up events.

In addition, do your styling in CSS as much as possible and use CSS classes.

Putting it all together:

// 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>

Jasdeep Singh · Accepted Answer · 2020-03-15 20:41:45Z

Move the random number statement inside the onclick method so that it generate a new number on every click. Please find code below:

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

Collectives™ on Stack Overflow

Function executes only once when using onClick event [javascript]

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related