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

Redirecting a webpage in JavaScript

-
Redirects are way of navigating a user to another webpage or location redirects are normally done by server side implementations. it's possible to do redirects using JavaScript too window.location is a object that stores current location information such as path, port, hostname and href or the location in the address bar of your browser changing it invokes a redirect it's a simple way to redirect a user to another webpage Syntax window.location.asign('https://example.com') or simply like window.location = "https://example.com" or simply omit window location = "https://example.com"
Read more

What is 'this.' keyword in JavaScript

-
In JavaScript 'this' is an object and a reference to the current object that is used to get and to set properties of the current object. Take for instance within a function; const func = function (name){     this.name = name } func.name instance property name is set to that of the first argument; const inst = new func('duke') inst.name // returns duke You can as well extend func to set name using 'this'; func.prototype.set = function(name){     this.name = name } Running the previous instance with this set method; inst.set('John') // returns John
Read more

Introduction to webshare API (navigator.share)

-
Image
navigator.share is a JavaScript API providing a sharing interface similar to native apps webshare API is supported on most updated mobile browsers Including Google chrome for Android Sharing is done by passing an Object with parameters "url", "text" or "title" to navigator.share function. For a webshare request to succeed you must supply at lest one of the parameters navigator.share returns a Promise upon being called "upon navigator.share({     "url": document.location,     "text": "I'm an example",     "title": document.title }) .then(resp => console.info("Successfully shared")) .catch(errors => console.error(errors))
Read more