Bootstrap carousel button that tracks the number of clicks

Unfortunately, I am facing a challenging issue with creating a click counter for the Bootstrap carousel button. The problem seems to be related to the span element for the previous and next icons.

The button counter is not registering clicks on the respective span element.

$('button').click(function(btn) {
  btn.target.dataset.click_counter_hidden = (+btn.target.dataset.click_counter_hidden || 0) + 1;
  $('#click_search_left').val($('button[data-id="slider_left"]').attr("data-click_counter_hidden") || 0);
  $('#click_search_right').val($('button[data-id="slider_right"]').attr("data-click_counter_hidden") || 0);
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e0828f8f949394928190a0d5ced1ced0">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d4b6bbbba0a7a0a6b5a494e1fae5fae4">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>


<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel" data-bs-interval="false">

  <div class=class="carousel-item active">
    <div class="carousel-item" id="example1">
      <img id="example_1" src="https://picsum.photos/200/300" class="d-block w-100" alt="example_1">
    </div>
    <div class="carousel-item" id="example2">
      <img id="example_2" src="https://picsum.photos/200/300" class="d-block w-100" alt="example_2">
    </div>
    <div class="carousel-item" id="example3">
      <img id="example_3" src="https://picsum.photos/200/300" class="d-block w-100" alt="example_1">
    </div>
  </div>

  <button type="button" id='slider_left' data-id="slider_left" class="carousel-control-prev tracked_element" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" id="prev_icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  
  <button type="button" id='slider_right' data-id="slider_right" class="carousel-control-next tracked_element" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" id="next_icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
  
</div>

<input type="hidden" name="click_search_left" id="click_search_left" value="0" />
<input type="hidden" name="click_search_right" id="click_search_right" value="0" />

javascriptbootstrap-5buttonclick

Answer №1

Ensure that your buttons have a data attribute for tracking clicks.

<button data-click_counter_hidden="0">

Detect whether the click event occurred on the button itself or a child span element, and adjust accordingly.

$('button').on('click', function(e){
  
  $t = $(e.target);
  if (!$t.is('button')){
    $t = $t.parent();
  }
  
  clicks = parseInt($t.data('click_counter_hidden')) + 1;
  $t.data('click_counter_hidden', clicks);
  // Display the counter value in a different location if necessary

});

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

during implementation of ng-repeat directive with JSON dataset

When I receive JSON data and attempt to display it using the ng-repeat directive, I encounter an error ng-dupes error <table> <tr ng-repeat="emp in empArr"> <td>{{emp.empcode}}</td> <td>{{emp.empName}}< ...

javascriptangularjsjson

Develop a new entity utilizing Array in Javascript

let DaysArray: any = ["monday", "tuesday", "wednesday", "thursday", "friday", "saturday", "sunday"] I am looking to transform the above array into an Object structure as shown below: let DaysObject: any = { time: { headerName: "" }, m ...

javascriptarraysobjectfor-looptypescript

When clicking to open the md-select on Angular Material 1.1.0, an unwanted [object object] is being appended

Every time I try to open the md-select input, an [object Object] (string) is added to the body tag. Click here to see the md-select input After clicking the md-select once, this is how the body looks ...

javascriptangularjsangular-materialmd-select

Guide to arranging components in two columns using VueJS Vuetify Grid

My goal is to align two components in order to display data on two columns. I followed the official Vuetify Grid tutorial, but encountered some issues with fixed row components. Despite trying to change from row to column, it still doesn't work as exp ...

javascriptvue.jsgridvuetify.js

Angular CDK Overlay allows for bringing multiple overlays to the front effectively

Currently, I am experiencing an issue with Angular 15 where a click event placed within a mousedown event does not trigger. Interestingly, if the position of the element is not changed using appendChild, both the mousedown and click events work as expected ...

javascriptangulartypescript

Accessing fields from other sources in ng-repeat can be accomplished by utilizing special syntax within the ng-repeat directive

I have a unique challenge where I need to utilize the firstkey from one AngularJS model, firstcollection, as an index value in another collection called anothercollention. Essentially, I want to iterate over the values in anothercollention based on the k ...

javascriptangularjs

Tips for choosing the following row in an Angular user interface grid

How can I deselect the currently selected row and select the one that follows it by clicking a button? I am using AngularHotkeys.js for this purpose. It gets even more complicated because I can sort the table with different columns. It would be helpful to ...

javascriptangularjs

Having issues with my JavaScript timer - seeking assistance in troubleshooting the problem

Trying to set a timer for my little game, but facing some difficulties. The timer causes the balance to randomly increase from 0 to 13000 + some extra amount. <script> var coins = 0; var speed = 1; </script> <center> <h4> ...

javascripthtmlcss

Update the text using JavaScript to modify the price range dropdown when the user clicks away

Dropdown functionality is working when selecting a price, but updating the price in the text box manually does not trigger an update. How can you implement an onblur change event for manual entry of prices? JSFiddle function nFormatter(num, digits) { ...

javascriptjquery

Is there a way for me to prevent a particular file from being cached by web browsers?

Is there a way to prevent Web Browsers from caching a particular file? For example: <img src="myImage.jpg" cache="false"></img> If possible, how can this be achieved? The code <meta http-equiv="cache-control" content="no-cache" /> ins ...

javascriptjqueryhtmlcaching

Is there a way to eliminate the header and footer from a Flutter WebView?

Here is the code snippet I tried to implement: I found a video tutorial by Joannes Mike on YouTube demonstrating how to remove the header and footer in Flutter WebView. However, it seems that Flutter has updated their library and the functions no longer w ...

javascriptflutterflutterwebviewpluginwebview-flutter

What is the most popular method for namespacing AngularJS modules?

I am new to AngularJS and currently exploring different ways to namespace modules in my application. One challenge I face is the need to integrate my Angular app into a designated placeholder div within a third-party website (which may also use Angular), ...

javascriptangularjsnamespaces

Creating a hierarchical tree structure in AngularJS by recursively traversing JSON data

I am having trouble creating a node tree from a JSON file. My index.html file should load the node tree recursively from person.json, but I'm stuck in an infinite loop. Can someone please assist me with this? app.js (function() { var app = angula ...

javascriptjsonangularjsrecursion

The interaction between Vue components causing changes in each other's data

Currently, I am working on a project using vue/nuxt. In order to dynamically load data from a JSON file during compilation, I am utilizing nuxt and webpack (Dynamically get image paths in folder with Nuxt). The structure of my JSON file is as follows: { ...

javascriptvue.jsvuejs2

Implementing a queue with an on-click event

As a self-proclaimed Java nerd diving into the world of jQuery, I'm facing some challenges. My goal is to create 3 interactive boxes that behave in a specific way: when clicked, one box should come forward while the other two dim and stay in the back ...

javascriptjqueryhtmlcss

Angular is able to select an element from a specified array

I'm currently struggling with using Angular to manipulate a TMDB API. I am having difficulty retrieving an item from an array. Can someone provide assistance? Here is the response that the array returns: { "id": 423108, "results ...

javascriptangularapi

Enhancing HTML with VueJS and managing imports

After successfully developing a Single Page Application using VueJS, I realized that the SEO performance was not up to par. To combat this, I decided to create a standard HTML website with some pages incorporating VueJS code (since my hosting environment d ...

javascriptvue.jsvuejs2axiosvue-component

Unable to decrease the width of a div element in Vuetify and Nuxt

As I work on creating a dynamic form with fields that need to occupy only 50% of the size of a regular field, I encounter different components based on data provided by Vuex. The use of v-for in Vue.js helps me loop through form objects and render the app ...

javascripthtmlcssvue.jsvuetify.js

Using values from a designated line within the textarea to successfully submit a GET form

How can I extract values from a specific line in a TextArea and use them to submit a form? <!DOCTYPE html> <html> <body> <input type='button' value='submit' onclick='document.getElementById("submit-line-3") . ...

javascriptjqueryhtmlajax

Is GetStaticPath in NextJS suitable for generating large amounts of static data?

On my website, I have a page dedicated to displaying information about hotels based on their unique IDs. To achieve this functionality, I utilize getStaticPath to generate paths like /hotel-info/542711, where 542711 represents the hotel's ID. However ...

javascriptperformancenext.jsserver-side-rendering