"Efficiently Triggering Multiple Events with One Click in JavaScript

Question

"Efficiently Triggering Multiple Events with One Click in JavaScript

Hey everyone, I could use some assistance. I'm trying to execute multiple events with a single click. Currently, I can change the image in my gallery on click, but I also want to add text labels corresponding to each image. Whenever I click on a different image, I need to replace the existing label. How can I achieve this with a single click event?


        const current = document.querySelector('#current');
        const imgs = document.querySelectorAll('.imgs img');
        const main = document.querySelector('#main-info h3');
        const info = document.querySelector('.info');

        imgs.forEach(img => img.addEventListener('click', imgClick));

        function imgClick(e) {
            current.src = e.target.src;
        }


        /* Your CSS code goes here */


        <!-- Your HTML code goes here -->

javascript html jquery css dom-events

Answer 1

Answer №1

If you're looking to pass additional arguments to your imgClick function, one approach is to utilize anonymous functions. Here's a possible solution:

imgs.forEach(img => img.addEventListener('click', function(e){
    imgClick(e, 'param1', 'param2');
}));

function imgClick(e, param1, param2) {
    current.src = e.target.src;
    // Add your code here
}

Then insert your desired code within the imgClick function.

Answer 2

If you're looking to pass additional arguments to your imgClick function, one approach is to utilize anonymous functions. Here's a possible solution:

imgs.forEach(img => img.addEventListener('click', function(e){
    imgClick(e, 'param1', 'param2');
}));

function imgClick(e, param1, param2) {
    current.src = e.target.src;
    // Add your code here
}

Then insert your desired code within the imgClick function.

"Efficiently Triggering Multiple Events with One Click in JavaScript

Answer №1

Similar questions

Switch out the Angular panel with a simple click event

When trying to set the state in the OnMouseOver event, an error is thrown: TypeError - React is

Inject additional information following user authentication

How can I confirm that all elements have been properly reset to their original positions prior to making any further adjustments to them?

Having trouble passing form data to the action method in MVC while using jQuery ajax?

Accessing Struts2 tag attributes with JavaScript

Setting up the Laravel backend to work with the server side of Backbone's urlRoot

Looking through a Json file and retrieving data with the help of Javascript

Choose all the items that share a specific hue?

Nightwatch is a tool that allows you to interact with elements on a webpage by clicking on an element within

Node.js: retrieving a webpage and waiting for it to load before extracting data

Vue.js v-cloak lifecycle method

Using CSS3 to style the first letter of a text, align it vertically as super, and adjusting

Skipping validation while navigating back on SmartWizardIf you need to bypass validation during backward

Encountering an issue when trying to modify product quantity using AJAX

Display a remote page on hover using Javascript, CSS, and HTML without providing any clickable link

Creating HTML code for a mobile responsive design

How to Detect Font Resizing in Google Web Toolkit (GWT)

What is the best way to reveal and automatically scroll to a hidden div located at the bottom of a webpage?

Unable to retrieve data from AJAX request in the AJAX success function