When employing the onClick event in JavaScript, the function is executed only a single time

Question

When employing the onClick event in JavaScript, the function is executed only a single time

I want a div's background image (#reaction-background) to change randomly every time a button is clicked (#angry) using onclick event. However, currently 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 different images for reactions
var fileNamesReactions = [
  "angry1.jpg",
  "angry2.jpg",
  "angry3.jpg",
  "angry4.jpg",
  "angry5.jpg"
];
// get a random index from the array 
var randomIndexReaction = Math.floor(Math.random() * fileNamesReactions.length);
// function to change background image on button click
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";
}

javascript html css

Answer 1

Answer №1

Each time you click, your click event handler runs. However, the issue lies in how you only generate a random number once, before any clicks occur. This results in the same background image being set repeatedly upon further clicks.

To resolve this, move the random number generator inside the click callback so that a new random number is generated with each click.

Avoid using the onclick property of the element to set up the callback. Instead, opt for the more modern and reliable .addEventListener() method for setting up events.

Furthermore, try to handle styling in CSS whenever possible and utilize CSS classes.

Here is an example integrating all these points:

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

Each time you click, your click event handler runs. However, the issue lies in how you only generate a random number once, before any clicks occur. This results in the same background image being set repeatedly upon further clicks.

To resolve this, move the random number generator inside the click callback so that a new random number is generated with each click.

Avoid using the onclick property of the element to set up the callback. Instead, opt for the more modern and reliable .addEventListener() method for setting up events.

Furthermore, try to handle styling in CSS whenever possible and utilize CSS classes.

Here is an example integrating all these points:

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

Answer №2

Make sure to move the random number statement inside the onclick method so that a new number is generated every time the user clicks. You can refer to the code snippet below:

// array of pictures
var fileNamesReactions = [
  "happy1.jpg",
  "happy2.jpg",
  "happy3.jpg",
  "happy4.jpg",
  "happy5.jpg"
];

// shuffle pictures randomly
document.getElementById("happy").onclick = function() {

// get a random index for reactions
var randomIndexReaction = Math.floor(Math.random() * fileNamesReactions.length);

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

Answer 4

Make sure to move the random number statement inside the onclick method so that a new number is generated every time the user clicks. You can refer to the code snippet below:

// array of pictures
var fileNamesReactions = [
  "happy1.jpg",
  "happy2.jpg",
  "happy3.jpg",
  "happy4.jpg",
  "happy5.jpg"
];

// shuffle pictures randomly
document.getElementById("happy").onclick = function() {

// get a random index for reactions
var randomIndexReaction = Math.floor(Math.random() * fileNamesReactions.length);

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

When employing the onClick event in JavaScript, the function is executed only a single time

Answer №1

Answer №2

Similar questions

The mysterious anomaly in Vue.js

Differences between an AngularJS function() and a factory function() when used in a

Utilizing Google Maps to display an infowindow upon clicking a location from a geojson file

Changing a base64 string to an image within an angular 4 environment

Reorganizing divisions with Dojo

How can JavaScript be used to create a unique signup and login process on

Using Selenium to choose a dropdown menu option - the dropdown menu will only appear once a search query has been entered into the

Enabling tab functionality through navigation and applying a class to the selected navigation button

ERROR: The Search function is not defined and cannot be accessed when the HTMLInputElement event is triggered

Execute CGI upon the loading of the page

Element that appears to be hidden

What is the best method for inserting dynamic HTML content (DIV) with JavaScript?

Making multiple Ajax calls can lead to receiving duplicate responses

Transfer the position of the export button in the Datatable to the lower section of

Personalized Element Commands and features

Mapping the Way: Innovative Controls for Navigation

Modules controllers angular.js namespacing

Positioning bar chart columns and text using CSS

What is the best way to create a video that takes up the entire height of a half-sized

The act of selecting a parent element appears to trigger the selection of its child elements as well