Assign an event listener to a collection of elements

Suppose I have an Array containing elements and another Array consisting of objects in the exact same index order. My goal is to add a click event for each element that will display a specific property of each object.

For instance:

myDivArray = [ div0, div1, div2];
myObjectArray = [object0, object1, object2];

myDivArray[1].addEventListener('click', function(event){
    document.getElementById('test').innerHTML = myObject[1].name
});

It's important to note that 'name' is one of the properties within each object.

Answer №1

Implement the forEach method for iteration purposes

myElements.forEach( function( item, key ){
  item.addEventListener( "click", function(){
     document.getElementById('output').innerHTML = myDataArray[ key ].title;
  })
}) 

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

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) { ...

What exactly does the 'app://' scheme entail when it comes to assets within Webpack-5-generated applications during development mode?

I've recently noticed a unique behavior in my Webpack 5-built application during development mode. The browser requests assets using a URL with an interesting app:// scheme. An example of this is: app:///node_modules/dir/to/package/index.js In the De ...

When running `npm test`, Mocha TS tests encounter failure, but the issue does not arise when executing them

When running tests in my Typescript nodejs project, I use the following command: mocha --compilers ts:ts-node/register,tsx:ts-node/register The tests run successfully with this command. However, when I try to run them using npm test, I encounter the foll ...

Challenge with dynamic parent routes

In my React application, different routes are loaded through various parent URLs. For example: {["/sat/", "/act/", "/gre/", "/gmat/", "/toefl/"].map((path) => ( <Route key={path} path={path ...

Storing geographic locations in a variable by inputting an address

Currently, I am working on a feature that allows users to input a location and then convert it into longitude and latitude coordinates. These coordinates will be stored in a variable called latlng instead of using preset coordinates. Right now, I have a fu ...

Utilizing Node.js for Lambda Functions

I am attempting to retrieve a list of all EC2 instances in a specific region using a lambda function. Below is the code snippet I am using: const AWS = require('aws-sdk'); AWS.config.region = '******'; exports.handler = async function( ...

What Google Domain Verification APIs are needed for verifying domains in Pub/Sub?

I've written this code that utilizes a Domain token to verify a domain with Google using the Site Verification API: const auth = await this.gcp.getApplicationCredential(accountId, projectId,[ 'https://www.googleapis.com/auth/siteverification ...

Issue encountered with create-next-app during server launch

Encountering an error when attempting to boot immediately after using create-next-app. Opted for typescript with eslint, but still facing issues. Attempted without typescript, updated create-next-app, and reinstalled dependencies - unfortunately, the prob ...

Unable to initialize the ng2-admin Angular2 Bootstrap template on a Go server due to a failed download attempt

Hello everyone, I am a newcomer to this forum and have limited experience with Angular2 and Golang. I am currently facing an issue as I want to experiment with a template on a Go server. To tackle this, I created a main.go file that includes the followin ...

Utilize Angular2 with ES6 modules while running an Express server

Having some issues using ES6 Modules with Angular2 in an app served by Node.js and Express.js. When attempting to load the Angular2/ES6 app in browser, encountered this error message in the FireFox console: The stylesheet http://localhost:8080/boot.css w ...

What are the best practices for managing mouse events in AlpineJS when working with my menu?

I'm currently tackling the challenge of developing a mega dropdown menu feature using alpine.js and Tailwind CSS. Unfortunately, I've hit a roadblock as I can't seem to get the mouse events functioning correctly. In the snippet below, you&ap ...

What is the best way to shorten text in Angular?

I am looking to display smaller text on my website. I have considered creating a custom pipe to truncate strings, but in my situation it's not applicable. Here's what I'm dealing with: <p [innerHTML]="aboutUs"></p> Due to t ...

Code for Custom Controllers in Strapi Beta version 3.0

I have encountered some discrepancies in the beta version of Strapi's controllers compared to the previous version. The new version includes multipart/sanitization boilerplate, and I am having trouble integrating my order object and Stripe charge. Be ...

Clicking on the image does not result in a larger image being displayed

Currently working on an assignment that requires a modal pop-out to display larger versions of photos when clicked, with the option to go back using the X button. Unfortunately, I'm facing issues with the X button not functioning properly and images n ...

Is it possible to incorporate an interface with a named function in TypeScript (function declaration)?

Just dipping my toes into Typescript and experimenting with interfaces for my functions: interface StringFunction { (arg1: string): string } I managed to associate this interface with a function by declaring it as a variable: let testFunction: Strin ...

Matching nodes to selectors is a breeze with Angular JS and jqLite

Currently, I am in the process of integrating a few jQuery functions into jqLite to avoid loading the entire jQuery library when working with my angular applications. Following the approach outlined by Ben Nadel in his insightful article. However, I have ...

Troubleshooting: WordPress post not uploading to custom PHP file - Issue causing ERROR 500

Our website is built using WordPress, and I was tasked with adding a function to our newsletter subscription that sends an email to a specific address based on the selected value in the form. Everything was working perfectly on my local host, but when I tr ...

Determining the visibility of an element on a webpage using JavaScript and Puppeteer

I've created a framework that scans websites hosted on our servers to ensure they comply with our policies. If any prohibited content is found, we capture a screenshot along with other relevant details. However, taking a screenshot may not be possibl ...

Typescript error: the argument passed as type a cannot be assigned to the parameter of type b

In my programming interface, I have defined shapes as follows: type Shape = | Triangle | Rectangle; interface Triangle {...} interface Rectangle {...} function operateFunc(func: (shape: Shape) => void) {...} function testFunction() { const rectFun ...

Testing NextJS App Router API routes with Jest: A comprehensive guide

Looking to test a basic API route: File ./src/app/api/name import { NextResponse } from 'next/server'; export async function GET() { const name = process.env.NAME; return NextResponse.json({ name, }); } Attempting to test ...