Ways to create two distinct "on click" actions for a single image to execute two distinct tasks

Clicking on an image will open a slider showing all images before filtering. Once filtered, only the selected images will be displayed in the slider.

<div class="gallery row" id="gallery" style="margin:0;">
  <!-- Grid column -->

  <div class="mb-3 pics animation all 2 col-md-4 col-sm-12">
    <img class="img-fluid" src="assets/images/11.jpg" alt="Card image cap" style="height:300px;" onclick="openModal();currentSlide(1)">
  </div>
  <!-- Grid column -->

  <!-- Grid column -->
  <div class="mb-3 pics animation all 1 col-md-4 col-sm-12">
    <img class="img-fluid" src="assets/images/111.jpg" alt="Card image cap" style="height:300px;" onclick="openModal();currentSlide(2)">
  </div>
  <!-- Grid column -->

  <!-- Grid column -->
  <div class="mb-3 pics animation all 1 col-md-4 col-sm-12">
    <img class="img-fluid" src="assets/images/131.jpg" alt="Card image cap" style="height:300px;" onclick="openModal();currentSlide(3)">
  </div>
  <!-- Grid column -->

  <!-- Grid column -->
  <div class="mb-3 pics animation all 2 col-md-4 col-sm-12">
    <img class="img-fluid" src="assets/images/141.png" alt="Card image cap" style="height:300px;" onclick="openModal();currentSlide(4)">
  </div>
  <!-- Grid column -->

  ...

javascripthtmlcss

Answer №1

Ever experimented with nesting two functions within a function?

function parent_function($argument){
      openModal();
      executeChildFunction($argument);
}

Also, in HTML context, 

<img class="img-fluid" ... onclick="parent_function(9);">

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Rails backend is struggling to receive Crossrider ajax post requests with JSON payload

I am encountering an issue where my attempts to post a JSON object to a remote server (Rails) are failing. The POST parameters seem to be converted to a url-encoded string instead of being sent as 'application/json'. Here is an example of what I ...

javascriptruby-on-railsajaxjsoncrossrider

redux saga: accessing different endpoint parameters

Recently, I encountered an endpoint function that looks like this: import AppConfig from "../config/app-config"; const create = (baseURL = AppConfig.apiUrl) => { const api = apisauce.create({ baseURL, headers: { "Cache-Control": "no-ca ...

javascriptreactjsreact-nativereduxredux-saga

Display the div according to the $index selected from the AngularJS list

Below is the structure of my HTML code: <div class="col-md-4"> <ul class="list-group text-left"> <a href="#" class="list-group-item" ng-click="showData($index)" ng-repeat="field in Data"> {{ field.name }}</a> ...

javascriptangularjs

What is the best way to compare two date strings with the format dd/mm/yyyy using JavaScript?

When attempting to compare a "Date" type of data with an "Any" type of data, the comparison is not functioning as expected. The date is retrieved in the following code: var today = new Date(); var dd = String(today.getDate()).padStart(2, '0'); v ...

javascripttypescript

Is it acceptable to manipulate the prevState parameter of the setState function as mutable?

It is commonly known that directly modifying this.state is not recommended, and instead setState should be used. Following this logic, I assumed that prevState should also be treated as immutable, and setState should always involve creating a new object i ...

javascriptreactjstypescript

Tips for changing the page URL upon click in a Vue.js application

I am currently developing a post board application using Vue.js and I am facing an issue with redirecting the page when a user clicks on each post. To handle this, I have made use of vue-route and axios in my project. Here is a snippet from index.js, ex ...

javascriptvue.jsvuejs2vuexvue-router

Modify a CSS style with JavaScript or jQuery

Can CSS rules be overwritten using jQuery or JavaScript? Imagine a table with rows categorized by different classes - "names" for persons and "company" for companies. How can we efficiently hide or show specific rows based on these classes? If we have a ...

javascriptjquerycss

Fetching Information from Firebase and Populating Dropdown Menus on a Website

Displayed below is a code snippet from a .JSON file stored in a Firebase database. "questionnaires" : { "ORANGE" : { "location" : "ny", "major" : { "engineering" : { "ECE" : { "3rd sem" : { "2018 ...

javascriptjqueryhtmljsonfirebase-realtime-database

Is it possible to utilize JSX when developing an App using React CDN or the CRA (create-react-app) boilerplate template?

The HTML Code: <div id="app"></div> <script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@latest/umd/react-dom.develo ...

javascriptreactjs

What could be causing axios to not function properly when used with async/await in this particular scenario

I need to update the DoorState when a button is clicked. After sending a request to the API to change the DoorState, I then call another API to check the status of the robot. Even though the DoorState has been successfully changed, it seems that the chan ...

javascriptreactjstypescriptnext.js

Unable to get jQuery click and hide functions to function properly

Hello, I am currently working on a program where clicking a specific div should hide its own class and display another one. However, the code does not seem to be functioning correctly. Below is my current implementation: $("#one").click(function(){ v ...

javascriptjquery

Error Alert: Attempting to access the 'prototype' property of an undefined value has resulted in a TypeError after switching to react-scripts version 4.0.3

I encountered a problem where I received the following error message: (Uncaught Error: Module build failed (from ./node_modules/source-map-loader/dist/cjs.js)). After attempting to resolve it by using npm install, a new error popped up in the console: path ...

javascriptnode.jsreactjsnpmnode-modules

Issue with jQuery's .height() method not updating

Here is the code I am working with: $(function() { $('#team-ch').click(function() { $('#team-camb-hert').height('auto'); }); }); I am trying to change the height of a div when a link is clicked. After adding an alert ...

javascriptjqueryhtmlcss

Instructions for connecting my website's URL to a designated channel (button) on an external widget

My goal is to connect a channel from a third-party widget to my website through a URL link with a button. I want the channel to open directly under that specific URL. I attempted this method, but it seems to be ineffective: shareurexperience Animal ">sha ...

html

What is the functionality of CSS radio tabs?

Can anyone provide a breakdown of how the final section of this code operates? Specifically: [type=radio]:checked { } [type=radio]:checked ~ .content { z-index: 1; } I am brand new to CSS and wanted to experiment with creating interactive CSS tabs, whi ...

htmlcsstabsradio-button

Steps for running a TypeScript project as a child process within a JavaScript project

I am facing an issue with integrating my Electron app, written mainly in JavaScript, with an Express server project built in TypeScript. When I attempt to create a child process of the TypeScript project within my electron.js file, I encounter TypeScript e ...

javascripttypescriptexpresselectrontsconfig

Alter the class of a div when a key is pressed

Whenever I press the down arrow key, the class of a div changes. However, the class only applies while I keep my finger on the button and gets removed when I release it. I would like the class to remain permanently. What am I doing incorrectly in this code ...

jqueryhtml

When trying to import the "firebase/app" module, an error occurred stating that the default condition should be the last one to be considered

Greetings! I am diving into the world of webpack and firebase. Every time I use: import { initializeApp } from "firebase/app"; I encounter this error message: Here is my file structure: index.html: <!DOCTYPE html> <html lang="en& ...

javascriptnode.jsfirebasewebpackwebpack-dev-server

What is the best way to include a new user in the memory database when there is no database or storage back-end?

During an online test, I was given the task of adding a user to a database stored in memory. The request body required JSON formatting as shown below: { "id": "aabbbccddeeefff", "name": "User One", "hobbies": [ "swim", "sing", "workout" ] } (Users ...

javascriptnode.jsbackendstoragein-memory-database

JQuery jqx validation is experiencing some issues

Utilizing jquery plugins and widgets from jqx for basic form validation in my ruby-on-rails application has proven to be very helpful. Here is a simple example of an HTML form: <form id="newForm"> <input type="text" id="name"/> < ...

javascriptjqueryvalidationwebforms