What is the technique to enable this div to be clickable?

Question

What is the technique to enable this div to be clickable?

I am trying to make each "card" of a WordPress plugin clickable on my website. I have inserted a Pure JS element with the following code:

document.getElementsByClassName('fc_card-container').onclick = function() {alert('It works!');}

Unfortunately, it is not working as expected. Can someone please help me figure out what I am doing wrong? Any assistance would be greatly appreciated. Thank you!

javascript css

Answer 1

Answer №1

To add a click event listener to every card:

// Select all elements with the .fc_card-container class and store them in a variable
// Using .getElementsByClassName returns an array-like object containing all selected elements
var cards = document.getElementsByClassName('fc_card-container');

// Convert the NodeList of cards into an array using [].slice.apply(cards)
// Use .forEach to iterate through the array of cards

[].slice.apply(cards).forEach(function(card, index){ 

    // Each element in the array represents a card
    // Add an event listener for each card using .addEventListener(EVENT, callback)

    card.addEventListener("click", function(e){ 
        alert(); 
        console.log(cards[index]); // Index indicates the precise array position (index) of the clicked card
        console.log(e.target); // e.target provides access to the clicked element
    }); 

});

Answer 2

To add a click event listener to every card:

// Select all elements with the .fc_card-container class and store them in a variable
// Using .getElementsByClassName returns an array-like object containing all selected elements
var cards = document.getElementsByClassName('fc_card-container');

// Convert the NodeList of cards into an array using [].slice.apply(cards)
// Use .forEach to iterate through the array of cards

[].slice.apply(cards).forEach(function(card, index){ 

    // Each element in the array represents a card
    // Add an event listener for each card using .addEventListener(EVENT, callback)

    card.addEventListener("click", function(e){ 
        alert(); 
        console.log(cards[index]); // Index indicates the precise array position (index) of the clicked card
        console.log(e.target); // e.target provides access to the clicked element
    }); 

});

Answer 3

Answer №2

document.querySelectorAll gives you an array of elements that match your specified selector. In this scenario, it would return an array of elements with the class name fc_card-container. To proceed, you can loop through these elements and attach an event listener to each one individually or target a specific element using its index (starting from 0).

Attaching Click Event to All Elements

var cards = document.querySelectorAll('.fc_card-container');
for(var i = 0; i < cards.length; i++){ //loop through each card
   cards[i].onclick = function() {alert('Success!');};
};

Attaching Click Event to a Single Element (e.g., 3rd element)

var cards = document.querySelectorAll('.fc_card-container');
cards[2].onclick = function() {alert('Success!');}; //0,1,2

Answer 4

document.querySelectorAll gives you an array of elements that match your specified selector. In this scenario, it would return an array of elements with the class name fc_card-container. To proceed, you can loop through these elements and attach an event listener to each one individually or target a specific element using its index (starting from 0).

Attaching Click Event to All Elements

var cards = document.querySelectorAll('.fc_card-container');
for(var i = 0; i < cards.length; i++){ //loop through each card
   cards[i].onclick = function() {alert('Success!');};
};

Attaching Click Event to a Single Element (e.g., 3rd element)

var cards = document.querySelectorAll('.fc_card-container');
cards[2].onclick = function() {alert('Success!');}; //0,1,2

What is the technique to enable this div to be clickable?

Answer №1

Answer №2

Attaching Click Event to All Elements

Attaching Click Event to a Single Element (e.g., 3rd element)

Similar questions

Controller fails to initialize when utilizing $location.path or $state.go

Utilizing the map() method for iterating through a nested property within a React component

Customizing the initial search parameters in Vue InstantSearch: A step-by-step guide

Tips for obtaining the state of a local variable in a Vue method:

Can someone please clarify how the nth-of-type selector functions?

Error message "Encountered an unknown type 'ForOfStatement' when attempting to execute an npm library"

Using NodeJS and Express together with Ajax techniques

The declaration file for the module 'bootstrap/dist/js/bootstrap' could not be located

Revalidating doesn't seem to work as expected in Next JS

Using Node/Express to split the request headers with the .split() method

Changing variables within anonymous functions in javascript can be done by using the parameters passed into

Deciding on pixel values, percentages, and sizing elements within CSS styles

Error: Jasmine cannot access a property of undefined value

Utilizing an array to pass a series of items to a function parameter

The video on mobile is not loading properly, as the play button appears crossed out

Using AngularJS to compare values against user input to determine if they are greater or lesser

Divide the array of words into segments based on the maximum character limit

When evaluating objects or arrays of objects to determine modifications

Ways to implement CSS styling for a particular HTML element

Can a vertical line be sketched next to a horizontal line?