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

JavaScript introduction to variables

-
JavaScript is a dynamically typed programming language variables are declared using the following format var `variablename` `value` instead of int integer = 100 In JavaScript a variable can accommodate any typeof value ie a variable can be assigned numbers, strings, functions, and objects. among modern browsers or in "strict mode" variables can be declared in an alternative way using const and let keywords. variable's defined this way's values can not be changed once they have been assigned. ie they are referred to as immutable. var name = "John" var lastname var year = 2020 // var age var male = true console.log( typeof name) // string console.log(typeof lastname) ///undefined console.log(typeof age) // undefined console.log(typeof year) // number console.log(typeof male) // boolean const pi  = 22 / 7 pi = undefined; // sometimes this can raise a typescript error // assignment to constant variable in strict mode console.log(pi) // 3.142...
Read more

Solutions to blocked URLs on Facebook

-
Facebook allows sharing links on it's platform but in order to protect it's users from accessing URLs containing malicious content Facebook on a regular scraps content on shared URLs effectively raising an alarm if content shared goes against Facebook community standards or in short it's content is forbidden on the Facebook platform, Forbidden content may include potentially malicious crafted phishing websites or websites spreading malware among others Facebook may as well ban content flagged spam either reported or flagged by Facebook moderating algorithm "Facebook sheriff" You wouldn't want to find your website 'spam-list handed' you should avoid that There's no way to redeem a website flagged as a blocked website on Facebook except other non viable alternates such as completely changing your domain or using another sub-domain Facebook may as well ban content containing banned URLs in the meta open graph attributes To resolve open-graph sha...
Read more

How to stop moz dotbot from accessing your website

-
Image
DotBot is Moz's web crawler, it gathers web data for the Moz Link Index Dotbot obeys robots.txt rules before accessing your host machine so the easiest way to stop dotbot is by adding robots.txt rules that limit dotbot activities To forbid a directory let's say "login" add; User-agent: dotbot Disallow: /login/ Upon reading and parsing directives above moz dotbot won't dare access you sites login sub directory in it's craw routine To forbid an entire website's access include directives below; User-agent: dotbot Disallow: / Alternatively you can limit crawl rate by adding directives below "time is probably in seconds" User-agent: dotbot Crawl-delay: 10 I've attached an nginx log it's a trail left by dotbot along with it's ip and moz support e-mail address; 216.244.66.194 - - [19/Mar/2020:15:16:29 +0000] "GET /index.html HTTP/1.1" 200 13433 "-" "Mozilla/5.0 (compat...
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

How to set content disposition header for nginx server to force content download

-
Image
Nginx (pronounced as engine x) is an HTTP server, reverse proxy server, as well as a mail proxy server Nginx is well known for its high performance, stability, efficiency, rich feature set, simple configuration, and low resource consumption. content disposition headers direct web browsers to save content instead of attempting to render it To set content disposition open your desired server configuration in "/etc/nginx/sites-available/" within your configuration add code below within your server {block} location ~* (mp3|ogg|wav)$ {     add_header Content-Disposition "attachment"; } mp3, ogg and wav are example file extensions matched by regular expressions rules Test configuration by acessing mp3, ogg and wav files from your webserver Alternatively you can force custom filenames as shown below "$1" substitutes filenames sent to clients. As an example its value corresponds to the requested file's extension lo...
Read more