How to target all elements of a given class name in JavaScript

-

JavaScript getByClassName only targets one element by default

Workarounds "loops"
Loops can mess up your code I personally don't like them.
To target all elements you will have to iterate through all of them for each element you will have to add a event listener

Example
For instance the are 3 links of a same class and you want to add event listeners on all of them
....
....
....
// JavaScript
const links = document.getByClassName("links")
for(var i = 0; i < links.length; i++)
links[i].addEventListener('click', event => console.log(event.target.get attribute('class')))

Comments

Post a Comment

Popular posts from this blog

How to make a html5 breakout game in JavaScript

-
In this tutorial i will walk through the  process of developing a simple breakout game in JavaScript using html5 canvas I'll be using craters.js a compact html5 game engine. in every step i will first explain the procedure in a less technical method later I'll include the snippets of the actual game , a link to the github repository and a live working demo. Game world is 2d space with zero friction and zero gravity in order to avoid applying acceleration to the entities periodically maybe this will be changed later. First entity is a ball an entity with zero friction that upon colliding with an obstacle such as a block, paddle or the the screen boundaries bounces back in the opposite direction the bouncing from left to the right side of the screen is implemented by if(position.x  + radius < 0) // bounce if(velocity > 0) return; // moving velocity *= -1; // change direction direction is only changed if the ball tries to move  beyond the zero position. i have t...
Read more

How to tabulate array key values using console.table

-
console.table is a function for tabulating arrays key value pairs it retuns a table when given an array as input. const table = Array(5).fill(0) console.table(table) ┌─────────┬────────┐ │ (index) │ Values │ ├─────────┼────────┤ │ 0 │ 0 │ │ 1 │ 0 │ │ 2 │ 0 │ │ 3 │ 0 │ │ 4 │ 0 │ └─────────┴────────┘
Read more

How to set content disposition headers for express nodejs apps

-
Image
In express nodejs apps you can force the user agent "browser" to rather download content instead of displaying or attempting to render given content within the browser. In this example assuming you're using express.static to serve content pass an Object as second argument to express.static function An Object with configuration parameters; const config = { setHeaders: res => res.set('Content-disposition',  'attachment') } In your code replace "path/to/media/" with the path pointing to the static content. app.use('/media/', express.static('path/to/media/', config)) To test try accessing content at /media/*
Read more

Ways of iterating Object properties in JavaScript

-
For Objects the ways of iterating their properties are not that plentiful as with Arrays. take for instance we have an object of dogs and cat characteristics const pets = { {name: " Jenny ", eyes: "brown"}, {name: "max", eyes: "blue"} } To iterate through the characteristics using for loop for (pet in pets) {     console.log(`${pets[pet].name} has eye color ${pets[pet].eyes}`} } Alternatively you can use objects.keys and object. entries for (element in Object.entries(elements)) }
Read more

How to evaluate a string on a regular expression rule in JavaScript

-
JavaScript has a built in regular expression function for testing if a string arguments is matching the given regular expression rule; Syntax of the regular expression tester is as follows; /regex/.test(string) Take for instance you want to test if a string contains only alphanumeric upper and lower case characters, space and numbers; const str = "Eat code sleep" /[A-Z,a-z,0-9, ]*/.test(str) // returns boolean 'true' Or in another example; const str = "Eat, Code, Sleep" /[A-Z,a-z,0-9, ]*/.test(str) // returns boolean 'false' Because commas are not included in the regular expression match rules.
Read more