How can I apply Javascript properly?

How can I apply Javascript properly? - javascript

Basically, there are four containers, each containing an image, I added a script that provides the ability to view the full image. But this function only works for the first container.
const img = document.querySelector("img");
const icons = document.querySelector(".icons");
img.onclick = function(){
this.classList.toggle("active");
icons.classList.toggle("active");
}
Html:
<div class="container">
<div class="wrapper">
<a href="#">
<img src="https://www.flaticon.com/premium-icon/icons/svg/3007/3007960.svg" alt="">
</a>
<div class="title">
Jeffrey
</div>
<div class="place">
Age | City, Country</div>
</div>
<div class="content">
<p>
User Interface Designer and <br>front-end developer</p>
<div class="buttons">
<div class="btn">
<button>Message</button>
</div>
<div class="btn">
<button>Following</button>
</div>
</div>
</p>
</div>
</div>
<div class="icons">
<li><span class="fab fa-facebook-f"></span></li>
<li><span class="fab fa-twitter"></span></li>
<li><span class="fab fa-instagram"></span></li>
</div>
</div>
Updated HTML (1), some details; I changed the names for each container and wrapper, created different CSS files for each new one and it did not work, here is a part of the new updated html:
<div class="container3">
<div class="wrapper3">
<a href="#">
<img src="https://www.flaticon.com/premium-icon/icons/svg/3007/3007960.svg" alt="">
</a>
<div class="title">
Name</div>
<div class="place">
Age | City, Country</div>
</div>
<div class="content">
<p>
User Interface Designer and <br>front-end developer</p>
<div class="buttons">
<div class="btn">
<button>Message</button>
</div>
<div class="btn">
<button>Following</button>
</div>
</div>
</div>
<div class="icons">
<li><span class="fab fa-facebook-f"></span></li>
<li><span class="fab fa-twitter"></span></li>
<li><span class="fab fa-instagram"></span></li>
</div>
</div>
<script>
const images = [...document.querySelectorAll(".wrapper img, .wrapper1 img, .wrapper2 img, .wrapper3 img")];
images.forEach(img => {
img.addEventListener("click", function() {
images
.filter(img => img !== this)
.forEach(img => img.classList.remove("active"));
this.classList.toggle("active");
</script>

Modify this to your liking. Have fun...
const images = [...document.querySelectorAll(".images-2 img, .images img")];
images.forEach(img => {
img.addEventListener("click", function() {
images
.filter(img => img !== this)
.forEach(img => img.classList.remove("active"));
this.classList.toggle("active");
});
});
.images,
.images-2 {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.images-2 img,
.images img {
box-sizing: border-box;
width: 200px;
height: 100px;
object-fit: cover;
object-position: center;
margin-bottom: 1rem;
transition: all 250ms linear;
cursor: pointer;
}
.images-2 img.active,
.images img.active {
transform: scale(1.2);
box-shadow: 0px 10px 25px -10px #333;
}
<div class="images">
<img src="https://placeimg.com/640/480/nature?1" />
<img src="https://placeimg.com/640/480/nature?2" />
<img src="https://placeimg.com/640/480/nature?3" />
</div>
<div class="images-2">
<img src="https://placeimg.com/640/480/nature?4" />
<img src="https://placeimg.com/640/480/nature?5" />
<img src="https://placeimg.com/640/480/nature?6" />
</div>

You need querySelectorAll and a for loop.
Try:
const img = document.querySelectorAll("img");
for (var i = 0; i < img.length; i++) {
img[i].addEventListener("click", function(e){
console.log(e);
});
}

Related

How to capture the inner dataset attribute value through javascript click?

I want to capture data-name and data-price when I click, and throw the captured data into the fields in the show block respectively.
But now because the price_item is clicked, it seems that only the data-name can be captured, and the internal data-price data cannot be obtained!
I want to ask how to rewrite the data to capture the data-name and data-price data at the same time?
I need everyone for the help, thank you all.
let coin_total = document.querySelector('.coin_total');
let item = document.querySelectorAll('.price_item');
let price = document.querySelector('.real-price');
function showplan(e) {
const target = e.currentTarget;
const selectedPlan = target.dataset.plan;
const selectedPrice = target.dataset.price;
item.forEach(el => el.classList.remove('active'))
coin_total.textContent = selectedPlan;
price.textContent = selectedPrice;
console.log(price);
}
item.forEach(el => el.addEventListener('click', showplan));
.price-content {
display: flex;
}
.price-content .price_item {
padding: 30px;
border: 1px solid #222;
border-radius: 4px;
margin: 10px;
}
<ul class="price-content">
<li class="price_item" data-plan="BASE">
<div class="price_item_plan">
<h2 class="name">BASE</h2>
<p class="coin">3,000 point</p>
</div>
<div class="price_item_cost">
<h3 class="price" data-price="3000"><span class="symbol">$</span>3,000</h3>
</div>
</li>
<li class="price_item" data-plan="Luxury">
<div class="price_item_plan">
<h2 class="name">luxury</h2>
<p class="coin">9,000 point</p>
</div>
<div class="price_item_cost">
<h3 class="price" data-price="9000"><span class="symbol">$</span>9,000</h3>
</div>
</li>
</ul>
<div class="show">
<p class="coin_total">60,000點(豪華版)</p>
<p class="real-price">$9,000</p>
</div>

The 'data-price' attribute is in the h3 tags, which are not being read in the event listener.
Put the 'data-price' attribute in every li with class 'price_item', the same way it is already done with 'data-plan'.

You have data-plan on the <li>, but data-price is on the <h3>.
You would have to get data-price from the <h3> directly, you can't access that from the dataset on the <li>.

I don't see the data-name in the code, but infer from your code it should refer to the data-plan, simply use getAttribute to get the attribute
const item = document.querySelectorAll('.price_item');
function showPlan(){
const show =
document.querySelectorAll('.show p');
show[0].textContent =
this.getAttribute('data-plan');
show[1].textContent =
this.querySelector('.price').getAttribute('data-price');
}
item.forEach(e => e.addEventListener('click', showPlan));
.price-content {
display: flex;
}
.price-content .price_item {
padding: 30px;
border: 1px solid #222;
border-radius: 4px;
margin: 10px;
}
<ul class="price-content">
<li class="price_item" data-plan="BASE">
<div class="price_item_plan">
<h2 class="name">BASE</h2>
<p class="coin">3,000 point</p>
</div>
<div class="price_item_cost">
<h3 class="price" data-price="3000"><span class="symbol">$</span>3,000</h3>
</div>
</li>
<li class="price_item" data-plan="Luxury">
<div class="price_item_plan">
<h2 class="name">luxury</h2>
<p class="coin">9,000 point</p>
</div>
<div class="price_item_cost">
<h3 class="price" data-price="9000"><span class="symbol">$</span>9,000</h3>
</div>
</li>
</ul>
<div class="show">
<p class="coin_total">60,000點(豪華版)</p>
<p class="real-price">$9,000</p>
</div>
You can also tweak how your dataset is designed, you can set both data-plan and data-price in the li tag.
For example, replace
<li class="price_item" data-plan="BASE">
with
<li class="price_item" data-plan="BASE" data-price="3000">
const item = document.querySelectorAll('.price_item');
function showPlan() {
const show =
document.querySelectorAll('.show p');
show[0].textContent =
this.getAttribute('data-plan');
show[1].textContent =
this.getAttribute('data-price');
}
item.forEach(e => e.addEventListener('click', showPlan));
.price-content {
display: flex;
}
.price-content .price_item {
padding: 30px;
border: 1px solid #222;
border-radius: 4px;
margin: 10px;
}
<ul class="price-content">
<li class="price_item" data-plan="BASE" data-price="3000">
<div class="price_item_plan">
<h2 class="name">BASE</h2>
<p class="coin">3,000 point</p>
</div>
<div class="price_item_cost">
<h3 class="price"><span class="symbol">$</span>3,000</h3>
</div>
</li>
<li class="price_item" data-plan="Luxury" data-price="9000">
<div class="price_item_plan">
<h2 class="name">luxury</h2>
<p class="coin">9,000 point</p>
</div>
<div class="price_item_cost">
<h3 class="price"><span class="symbol">$</span>9,000</h3>
</div>
</li>
</ul>
<div class="show">
<p class="coin_total">60,000點(豪華版)</p>
<p class="real-price">$9,000</p>
</div>
Or directly destructuring assignment the value from the dataset.
const {plan, price} = this.dataset;
const item = document.querySelectorAll('.price_item');
function showPlan() {
const {plan, price} = this.dataset;
const show = document.querySelectorAll('.show p');
show[0].textContent = plan;
show[1].textContent = price;
}
item.forEach(e => e.addEventListener('click', showPlan));
.price-content {
display: flex;
}
.price-content .price_item {
padding: 30px;
border: 1px solid #222;
border-radius: 4px;
margin: 10px;
}
<ul class="price-content">
<li class="price_item" data-plan="BASE" data-price="3000">
<div class="price_item_plan">
<h2 class="name">BASE</h2>
<p class="coin">3,000 point</p>
</div>
<div class="price_item_cost">
<h3 class="price"><span class="symbol">$</span>3,000</h3>
</div>
</li>
<li class="price_item" data-plan="Luxury" data-price="9000">
<div class="price_item_plan">
<h2 class="name">luxury</h2>
<p class="coin">9,000 point</p>
</div>
<div class="price_item_cost">
<h3 class="price"><span class="symbol">$</span>9,000</h3>
</div>
</li>
</ul>
<div class="show">
<p class="coin_total">60,000點(豪華版)</p>
<p class="real-price">$9,000</p>
</div>
Or put the data-plan into the tag (using the name class attribute), just like designing the data-price.
<li class="price_item">
<div class="price_item_plan">
<h2 class="name" data-plan="BASE">BASE</h2>
<p class="coin">3,000 point</p>
</div>
<div class="price_item_cost">
<h3 class="price" data-price="3000"><span class="symbol">$</span>3,000</h3>
</div>
</li>
const item = document.querySelectorAll('.price_item');
function showPlan(){
const getVal = (selector, name) =>
this
.querySelector(selector)
.getAttribute(name);
const show =
document.querySelectorAll('.show p');
show[0].textContent =
getVal('.price_item_plan .name', 'data-plan');
show[1].textContent =
getVal('.price_item_cost .price', 'data-price');
}
item.forEach(e => e.addEventListener('click', showPlan));
.price-content {
display: flex;
}
.price-content .price_item {
padding: 30px;
border: 1px solid #222;
border-radius: 4px;
margin: 10px;
}
<ul class="price-content">
<li class="price_item">
<div class="price_item_plan">
<h2 class="name" data-plan="BASE">BASE</h2>
<p class="coin">3,000 point</p>
</div>
<div class="price_item_cost">
<h3 class="price" data-price="3000"><span class="symbol">$</span>3,000</h3>
</div>
</li>
<li class="price_item">
<div class="price_item_plan">
<h2 class="name" data-plan="Luxury">luxury</h2>
<p class="coin">9,000 point</p>
</div>
<div class="price_item_cost">
<h3 class="price" data-price="9000"><span class="symbol">$</span>9,000</h3>
</div>
</li>
</ul>
<div class="show">
<p class="coin_total">60,000點(豪華版)</p>
<p class="real-price">$9,000</p>
</div>
Either way can be used as long as you know how and where to get the dataset value.

How to change icon for a custom accordion?

We created a custom accordion library that will toggle the .content element based on what is clicked similar to jQuery accordion. Next to the .header element we are displaying a fontawesome plus icon. I am running into issues where the content will hide and show, but the icon will not switch.
How can i get the content element and icons to switch?
Current issue:
Desired output:
$(function() {
$('.header').on('click', function() {
var hdr = $(this);
var grandParents = hdr.parent().parent();
grandParents.find('.item.active').removeClass('active');
grandParents.find('.content').stop().slideUp().removeClass('active');
hdr.closest('.item').find('.content').stop().slideToggle();
hdr.parent().toggleClass('active');
});
});
.content {
display: none;
}
.item.active > .content {
display: block;
}
.item.active > .header {
color: white;
background-color: black;
}
.header {
padding: 16px;
margin: 8px;
background-color: lightgrey;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js"></script>
<div class="accordion">
<div class="item">
<h3 class="header">
<i class="fas fa-plus"></i>
<span>First link</span>
</h3>
<div class='content'> SOME CONTENT HERE </div>
</div>
<div class="item">
<h3 class="header">
<i class="fas fa-plus"></i>
<span>second link</span>
</h3>
<div class='content'> SOME CONTENT HERE </div>
</div>
<div class="item">
<h3 class="header">
<i class="fas fa-plus"></i>
<span>third link</span>
</h3>
<div class='content'> Some more content </div>
</div>
</div>

I have updated your js code, please check. The general concept of my update is, in every click, the icon is removed and replaced with a new but different one (from plus to minus and vice versa).
The problem on this is that the use of fontawesome icons. But anyways, take a look on my code.
Here's the full working code. The only update I have is the js part.
$(function() {
$('.header').on('click', function() {
var hdr = $(this);
hdr.siblings('.content').slideToggle();
hdr.parent().toggleClass('active');
hdr.parent().siblings().find('.content').slideUp();
hdr.parent().siblings().removeClass('active');
if(hdr.parent().hasClass('active')) {
hdr.parent().find('svg').remove();
hdr.parent().siblings().find('svg').remove();
hdr.prepend('<i class="fas fa-minus"></i>');
hdr.parent().siblings().find('.header').prepend('<i class="fas fa-plus"></i>');
} else {
hdr.parent().find('svg').remove();
hdr.prepend('<i class="fas fa-plus"></i>');
}
});
});
.content {
display: none;
}
.item.active > .content {
display: block;
}
.item.active > .header {
color: white;
background-color: black;
}
.header {
padding: 16px;
margin: 8px;
background-color: lightgrey;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js"></script>
<div class="accordion">
<div class="item">
<h3 class="header">
<i class="fas fa-plus"></i>
<span>First link</span>
</h3>
<div class='content'> SOME CONTENT HERE </div>
</div>
<div class="item">
<h3 class="header">
<i class="fas fa-plus"></i>
<span>second link</span>
</h3>
<div class='content'> SOME CONTENT HERE </div>
</div>
<div class="item">
<h3 class="header">
<i class="fas fa-plus"></i>
<span>third link</span>
</h3>
<div class='content'> Some more content </div>
</div>
</div>

We had same kind of requirement, where we had to replace the + icon of each accordion item with dynamic icon specific to the accordion content, like
1st Accordion - a.png
2nd accordion - b.png and so on.
I did it by adding an image to the Accordion Item page content template and assign it to the cloned accordion rendering.

How to prevent jQuery apendTo from duplicating content

I'm trying to move a div(.titleContainer) inside another div(.imageContainer a) by using jQuery prependTo function, but for some reason the the content that was previously appended is also added to the element that's receiving an appended element. Thanks!
$(document).ready(function () {
$('.titleContainer').each(function(){
$(this).prependTo('.imageContainer a');
});
});
.imageContainer{
background: rgb(144, 144, 221);
}
.card{
margin-right: 20px;
flex: 0 0 30%;
}
h3{
color: black
}
body{
display: flex;
justify-content: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="card">
<div class="titleContainer">
<h3>title1</h3>
</div>
<div class="imageContainer">
<a href="">
<img src="" alt="">
</a>
</div>
</div>
<div class="card">
<div class="titleContainer">
<h3>title2</h3>
</div>
<div class="imageContainer">
<a href="">
<img src="" alt="">
</a>
</div>
</div>
<div class="card">
<div class="titleContainer">
<h3>title3</h3>
</div>
<div class="imageContainer">
<a href="">
<img src="" alt="">
</a>
</div>
</div>
</body>

You need to target .imageContainer within the same .card. Using '.imageContainer a' will target all a
$(document).ready(function() {
$('.titleContainer').each(function() {
$(this).prependTo($(this).closest('.card').find('.imageContainer a'));
});
});
.imageContainer {
background: rgb(144, 144, 221);
}
.card {
margin-right: 20px;
flex: 0 0 30%;
}
h3 {
color: black
}
body {
display: flex;
justify-content: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="card">
<div class="titleContainer">
<h3>title1</h3>
</div>
<div class="imageContainer">
<a href="">
<img src="" alt="">
</a>
</div>
</div>
<div class="card">
<div class="titleContainer">
<h3>title2</h3>
</div>
<div class="imageContainer">
<a href="">
<img src="" alt="">
</a>
</div>
</div>
<div class="card">
<div class="titleContainer">
<h3>title3</h3>
</div>
<div class="imageContainer">
<a href="">
<img src="" alt="">
</a>
</div>
</div>
</body>

$(function(){
$('.titleContainer').each(function(){
$(this).prependTo($(this).next().find('a'));
});
});
Codepen
Note: $(function(){}) === $(document).ready(function(){});

CSS grid - remove elements with jQuery so they don't take up space

So I have a css grid layout with "boxes" inside, that I filter with a text input and javascript. How can I hide the filtered out elements so that they don't even take up space within the grid (so the shown elements slide to the front) with jQuery?
jQuery.expr[':']['contains-insensitive'] = function(a, i, m) {
return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};
var $box = $('.box');
$('#search').on('input', function(e) {
$box.show();
$('.title').filter(`:not(:contains-insensitive('${this.value}'))`).closest('.box').hide();
});
.content {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr) ) ;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search" />
<div class="content">
<a>
<div class="box">
<p class="title">John</p>
Other content.
</div>
</a>
<a>
<div class="box">
<p class="title">Jack</p>
Other content.
</div>
</a>
<a>
<div class="box">
<p class="title">Jane</p>
Other content.
</div>
</a>
<a>
<div class="box">
<p class="title">Jenny</p>
Other content.
</div>
</a>
</div>

To make this work you need to hide the a elements that wrap the .box, not just the .box. Try this:
jQuery.expr[':']['contains-insensitive'] = function(a, i, m) {
return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};
var $a = $('.content a');
$('#search').on('input', function(e) {
$a.show().find('.title').filter(`:not(:contains-insensitive('${this.value}'))`).closest('a').hide();
});
.content {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search" />
<div class="content">
<a>
<div class="box">
<p class="title">John</p>
Other content.
</div>
</a>
<a>
<div class="box">
<p class="title">Jack</p>
Other content.
</div>
</a>
<a>
<div class="box">
<p class="title">Jane</p>
Other content.
</div>
</a>
<a>
<div class="box">
<p class="title">Jenny</p>
Other content.
</div>
</a>
</div>

Instead of hiding the .box divs, hide the parent a tag.
jQuery.expr[':']['contains-insensitive'] = function(a, i, m) {
return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};
var $a = $('a');
$('#search').on('input', function(e) {
$a.show();
$('.title').filter(`:not(:contains-insensitive('${this.value}'))`).closest('a').hide();
});
.content {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr) ) ;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search" />
<div class="content">
<a>
<div class="box">
<p class="title">John</p>
Other content.
</div>
</a>
<a>
<div class="box">
<p class="title">Jack</p>
Other content.
</div>
</a>
<a>
<div class="box">
<p class="title">Jane</p>
Other content.
</div>
</a>
<a>
<div class="box">
<p class="title">Jenny</p>
Other content.
</div>
</a>
</div>

Simple. Instead of hiding .box elements hide their parents (a)
jQuery.expr[':']['contains-insensitive'] = function(a, i, m) {
return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};
var $box = $('.box');
$('#search').on('input', function(e) {
$box.parent().show();
$('.title').filter(`:not(:contains-insensitive('${this.value}'))`).closest('.box').parent().hide();
});
.content {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search" />
<div class="content">
<a>
<div class="box">
<p class="title">John</p>
Other content.
</div>
</a>
<a>
<div class="box">
<p class="title">Jack</p>
Other content.
</div>
</a>
<a>
<div class="box">
<p class="title">Jane</p>
Other content.
</div>
</a>
<a>
<div class="box">
<p class="title">Jenny</p>
Other content.
</div>
</a>
</div>

Is it possible to use one script to move mulitple hrefs to a class without having to use nth-child

Say I have a few divs that look like this:
<div class="Box">
<img src=../image.jpg>
<div class="mask">
<a href="link" class="Link">
</div>
</div>
<div class="Box">
<img src=../image.jpg>
<div class="mask">
<a href="link" class="Link">
</div>
</div>
<div class="Box">
<img src=../image.jpg>
<div class="mask">
<a href="link" class="Link">
</div>
</div>
is it possible to take the hrefs and move them to the Box class without having to use nth-child in the script?

I assume you like to make the whole outer div area clickable.
I solved this as follows.
$(document).ready(function () {
$('[data-clickable-area]').click(function (e) {
e.preventDefault();
e.stopPropagation();
$(this).find('a').first().trigger('click');
});
$('[data-clickable-area] a').click(function (e) {
// triggering the default handler of browser did not succeed
window.location = $(this).attr('href');
e.stopPropagation();
});
});
[data-clickable-area] {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="Box" data-clickable-area>
<img src=../image.jpg>
<div class="mask">
<a href="https://duckduckgo.com/" class="Link">
</div>
</div>
<div class="Box" data-clickable-area>
<img src=../image.jpg>
<div class="mask">
<a href="https://duckduckgo.com/" class="Link">
</div>
</div>
<div class="Box" data-clickable-area>
<img src=../image.jpg>
<div class="mask">
<a href="https://duckduckgo.com/" class="Link">
</div>
</div>
Only one link for every box is supported in my solution.

Based on your comment, in that case I would use a CSS only approach. Since your client wants it on Mobile anyways simple make the parent container position relative and make the link you want to be clickable position absolute with a higher z-index and make it fill the container like so:
/*Demo styling */
.Box {
height: 200px;
width: 200px;
background: #f0f0f0;
}
body > * + * {
margin-top: 10px;
}
/*Suggested styling */
#media screen and (max-width: 1024px) {
.Box {
position: relative;
}
.Box .Link {
position: absolute;
height: 100%;
width: 100%;
z-index: 2;
left: 0;
top: 0;
}
}
<div class="Box">
<img src=../image.jpg>
<div class="mask">
<a href="link" class="Link">
<a href="link2">
</div>
</div>
<div class="Box">
<img src=../image.jpg>
<div class="mask">
<a href="link" class="Link">
<a href="link2">
</div>
</div>
<div class="Box">
<img src=../image.jpg>
<div class="mask">
<a href="link" class="Link">
<a href="link2">
</div>
</div>

Develop Reference

JavaScript is the programming language of the Web.

How can I apply Javascript properly? - javascript

You need querySelectorAll and a for loop. Try: const img = document.querySelectorAll("img"); for (var i = 0; i < img.length; i++) { img[i].addEventListener("click", function(e){ console.log(e); }); }

Related

How to capture the inner dataset attribute value through javascript click?

How to change icon for a custom accordion?

How to prevent jQuery apendTo from duplicating content

CSS grid - remove elements with jQuery so they don't take up space

Is it possible to use one script to move mulitple hrefs to a class without having to use nth-child

Categories

Resources