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

HTML Button without Connection to Javascript

Creating a Typescript interface for a anonymous function being passed into a React component

Combining rows and columns in Flexbox design

Retrieving attribute values when using the .on function in jQuery

Extract data from JSON in Google Sheets

Insert a division into the table following every row

Leveraging AJAX within a RESTful API in a Node.js environment to retrieve a JSON file and dynamically parse its contents according to the specific button selected on the front-end interface

Enable the bottom footer to expand along with the content to support a dynamically growing page

Generating dynamic dropdown menus using data from a database with the help of PHP and Ajax technologies

Peeling back the layers of a particular element

Struggling with a TypeError in React/Next-js: Why is it saying "Cannot read properties of undefined" for 'id' when the object is clearly filled with data?

Implementing a distinct approach to adding margins to div boxes using

steps to create a personalized installation button for PWA

When the limit is set to 1, the processing time is 1ms. If the limit is greater than 1, the processing time jumps to

What is the best way to incorporate a <li> view cap within a div element using JavaScript?

Choose from the options provided to display the table on the screen

Unable to vertically scroll on a position fixed element

What are the steps for implementing pytesseract on a node.js server?

Numerous sections of content

Place the emoji where the cursor is located