My html looks like that:
<div class="row g-0 align-items-center wow fadeInUp galle" style="margin-top: 20px; display: flex;
justify-content: space-around;" data-wow-delay=".25s">
<div class="modal-img">
<img class="full-img" src="#" alt="pop">
<p class="caption" style="font-size: 50px;color: white;"></p>
</div>
<div class="card aluminiumCard" id="aluminium" style="width: 18rem;">
<img id="imggene" src="assets\images\a.png" class="card-img-top alhigh" alt="..." >
<div class="card-body imgal">
<p class="card-text" style="font-size: 22px; text-align: center;font-weight: bold; color: white;">Text 1</p>
<p class="img-text">Text genesuis </p>
</div>
</div>
<div class="card aluminiumCard" style="width: 18rem;">
<img src="assets\images\2.png" class="card-img-top alhigh" alt="..." >
<div class="card-body imgal">
<p class="card-text" style="font-size: 22px; text-align: center;font-weight: bold; color: white;">Image 2</p>
<p class="img-text">Text 2</p>
</div>
</div>
</div>
What I am trying to do is to click on image and forward the src to the img with fullimg class, which is displayed in the middle of the screen. I have figured out this part, but I am struggling with getting the data from the paragraph with class img-text and forwarding it to the paragraph with caption class, which is also displayed in the middle of the screen under the image.
Here's my javascript:
const modalimg = document.querySelector(".modal-img");
const previews = document.querySelectorAll(".galle img");
const original = document.querySelector(".full-img");
const imgText = document.querySelector(".caption");
const Tests = document.querySelectorAll(".galle .img-text");
previews.forEach(preview => {
preview.addEventListener('click', () =>{
modalimg.classList.add("open");
original.classList.add("open");
const originalSrc = preview.getAttribute('src');
original.src = originalSrc;
Tests.forEach(test => {
const data = test.innerText;
console.log(data);
});
})
})
modalimg.addEventListener('click', (e) => {
if(e.target.classList.contains('modal-img')){
modalimg.classList.remove('open');
original.classList.remove("open");
}
})
})();
I was trying to get the innerText from img-text class and print that in the console just to test it, but it displays the innerText from all paragraphs with the same class.
What should I do, to get the innerText just from the card, that image is clicked on?
There are also sibling selectors you can use that take advantage of relative positioning. But be mindful of the html tags, adding or removing elements can break the assignments.
Alternatively you can add data-* attributes to the image and not have to worry about finding html tags at all.
document.addEventListener('DOMContentLoaded', (event) => {
const previews = document.querySelectorAll(".galle img");
const original = document.querySelector(".full-img");
const imgText = document.querySelector(".caption");
const imgText2 = document.querySelector(".caption2");
previews.forEach((e) => {
e.addEventListener('click', (e) => {
original.src = e.target.src;
imgText.innerText = e.target.nextElementSibling.querySelector(".img-text").innerText;
// OR by data-* attribute
imgText2.innerText = e.target.dataset.description;
});
});
});
.card-text {
font-size: 22px;
text-align: center;
font-weight: bold;
color: white;
}
<div class="row g-0 align-items-center wow fadeInUp galle" style="margin-top: 20px; display: flex;
justify-content: space-around;" data-wow-delay=".25s">
<div class="modal-img">
<img class="full-img" src="#" alt="pop">
<p class="caption" style="font-size: 20px;"></p>
<p class="caption2"></p>
</div>
<div class="card aluminiumCard" id="aluminium" style="width: 18rem;">
<img id="imggene" src="https://picsum.photos/id/237/100"
class="card-img-top alhigh" alt="..."
data-description="Text genesuis">
<div class="card-body imgal">
<p class="card-text">Text 1</p>
<p class="img-text">Text genesuis</p>
</div>
</div>
<div class="card aluminiumCard" style="width: 18rem;">
<img src="https://picsum.photos/id/2/100"
class="card-img-top alhigh" alt="..."
data-description="Text 2">
<div class="card-body imgal">
<p class="card-text">Image 2</p>
<p class="img-text">Text 2</p>
</div>
</div>
</div>
Related
I'm creating slider using flickity and what I'm trying to do is when slide is selected the background color of body change (each slide has a specific color.. the problem is (is-selected) class can't detected in JavaScript even though I clearly see it in console
html:
<div class="carousel" data-flickity='{ "wrapAround": true }'>
<div class="carousel-cell" data-color="red">
<img class="pic" src="./img/1.jpeg" alt="">
</div>
<div class="carousel-cell" data-color="blue">
<img class="pic" src="./img/2.jpeg" alt=""
</div>
<div class="carousel-cell" data-color="green">
<img class="pic" src="./img/3.jpeg" alt="">
</div>
</div>
let cell = document.querySelectorAll(".carousel-cell");
cell.forEach((c) => {
// console.log(c.dataset.color);
if (c.classList.contains("is-selected")) {
document.body.style.backgroundColor = "red";
}
});
how can I solve this?
You might tweak Flickity itself like I do in the snippet below, or if you'd like to keep it clean, you want to use mutationObserver.
const selectFn = [
'var a = fizzyUIUtils;',
(Flickity.prototype.select + '').substring(16).replace(/}$/, ';'),
'document.body.style.backgroundColor = this.cells.find(c => c.element.classList.contains("is-selected")).element.dataset.color;'
].join('');
Flickity.prototype.select = new Function('t', 'e', 'i', selectFn);
.carousel {
height: 80vh;
width: 80vw;
margin: 10vh 0 0 10vw
}
.carousel-cell,
.pic {
height: 100%;
width: 100%;
}
.pic {
object-fit: contain
}
<link rel="stylesheet" href="https://unpkg.com/flickity#2/dist/flickity.min.css">
<script src="https://unpkg.com/flickity#2/dist/flickity.pkgd.min.js"></script>
<div class="carousel" data-flickity='{ "wrapAround": true }'>
<div class="carousel-cell" data-color="red">
<img class="pic" src="https://picsum.photos/id/21/400/300" alt="">
</div>
<div class="carousel-cell" data-color="blue">
<img class="pic" src="https://picsum.photos/id/16/400/300" alt="">
</div>
<div class="carousel-cell" data-color="green">
<img class="pic" src="https://picsum.photos/id/28/400/300" alt="">
</div>
</div>
I am trying to get innerHtml from one paragraph (.img-text class) using JavaScript and then inserting it in another (.caption class) when clicked on an image.
My HTML looks like that:
<div class="galle">
<div class="modal-img">
<img class="full-img" src="#" alt="pop">
<p class="caption"></p>
</div>
<div class="card aluminiumCard">
<img id="imggene" src="img1.png" class="card-img-top alhigh" >
<div class="card-body imgal">
<p class="card-text">Genesis 75</p>
<p class="img-text">Text genesis</p>
</div>
</div>
<div class="card aluminiumCard">
<img src="img2.png" class="card-img-top alhigh" alt="..." >
<div class="card-body imgal">
<p class="card-text">Imperial</p>
<p class="img-text">Text imperial</p>
</div>
</div>
The Javascript code looks like that:
const modalimg = document.querySelector(".modal-img");
const previews = document.querySelectorAll(".galle img");
const original = document.querySelector(".full-img");
previews.forEach(preview => {
preview.addEventListener('click', () =>{
modalimg.classList.add("open");
original.classList.add("open");
const originalSrc = preview.getAttribute('src');
original.src = originalSrc;
})
})
It's responsible for an image pop up when clicking on an image inside a card. How I can get innerHTML data from the .img-text class, that's corresponding to the image that has been clicked inside a card and then paste that to the paragraph with .caption class?
I have tried:
const caption = document.querySelector(".caption");
const text-img = document.querySelectorAll(".img-text");
then:
const text = text-img.innerHTML
caption.innerHTML = text
But it takes data only from the first card.
const modalimg = document.querySelector(".modal-img");
const previews = document.querySelectorAll(".galle img");
const original = document.querySelector(".full-img");
previews.forEach(preview => {
preview.addEventListener('click', () => {
modalimg.classList.add("open");
original.classList.add("open");
const originalSrc = preview.getAttribute('src');
original.src = originalSrc;
})
})
<div class="galle">
<div class="modal-img">
<img class="full-img" src="#" alt="pop">
<p class="caption"></p>
</div>
<div class="card aluminiumCard">
<img id="imggene" src="img1.png" class="card-img-top alhigh">
<div class="card-body imgal">
<p class="card-text">Genesis 75</p>
<p class="img-text">Text genesis</p>
</div>
</div>
<div class="card aluminiumCard">
<img src="img2.png" class="card-img-top alhigh" alt="...">
<div class="card-body imgal">
<p class="card-text">Imperial</p>
<p class="img-text">Text imperial</p>
</div>
</div>
const image = document.getElementsByClassName("card-img-top");
const renderToCaption = (i) => {
document.getElementsByClassName("caption")[0].innerHTML = document.getElementsByClassName("img-text")[i].innerHTML;
document.getElementsByClassName("full-img")[0].setAttribute("src", document.getElementsByClassName("card-img-top")[i].getAttribute("src"));
};
for (let i = 0; i < image.length; i++) {
image[i].addEventListener("click", ()=>renderToCaption(i));
}
.card-img-top, .full-img{
width: 150px;
cursor:pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="galle">
<div class="modal-img">
<img class="full-img" src="#" alt="pop">
<p class="caption">abc</p>
</div>
<div class="card aluminiumCard">
<img id="imggene" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Android_robot_head.svg/1200px-Android_robot_head.svg.png" class="card-img-top alhigh">
<div class="card-body imgal">
<p class="card-text">Genesis 75</p>
<p class="img-text">Text genesis</p>
</div>
</div>
<div class="card aluminiumCard">
<img src="https://storage.googleapis.com/gweb-uniblog-publish-prod/images/HeroHomepage_2880x1200.max-1300x1300.jpg" class="card-img-top alhigh" alt="...">
<div class="card-body imgal">
<p class="card-text">Imperial</p>
<p class="img-text">Text imperial</p>
</div>
</div>
</body>
</html>
Check the code above, i guess this fulfils your need. Don't just copy paste, read and understand how it works.
ADVISE: Consider using vanilla JS instead of jQuery on places where possible.
BEST OF LUCK
my carousel is displayed on a modal window by clicking on a modal-button. When I click on the button the carousel is displayed but when I click on the next button or the previous button to scroll, it does not work. When I test the carousel on a full-width page, it works perfectly. please help. thanks in advance
HTML:
<button id="modal-btn" type="button" class="custom-btn text-white" data-bs-toggle="modal"
data-bs-target="#editTrickModal" hidden>
Modifier
</button>
<div class="modal fade" id="editTrickModal" tabindex="-1" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-body">
<div class="modal-header">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div id="carouselExampleControls" class="carousel" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="card">
<div class="img-wrapper"><img src="..." class="d-block w-100" alt="..."> </div>
<div class="card-body">
<h5 class="card-title">Card title 1</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the
card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="carousel-item">
<div class="card">
<div class="img-wrapper"><img src="..." class="d-block w-100" alt="..."> </div>
<div class="card-body">
<h5 class="card-title">Card title 2</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the
card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="carousel-item">
<div class="card">
<div class="img-wrapper"><img src="..." class="d-block w-100" alt="..."> </div>
<div class="card-body">
<h5 class="card-title">Card title 3</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the
card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="carousel-item">
<div class="card">
<div class="img-wrapper"><img src="..." class="d-block w-100" alt="..."> </div>
<div class="card-body">
<h5 class="card-title">Card title 4</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the
card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="carousel-item">
<div class="card">
<div class="img-wrapper"><img src="..." class="d-block w-100" alt="..."> </div>
<div class="card-body">
<h5 class="card-title">Card title 5</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the
card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="carousel-item">
<div class="card">
<div class="img-wrapper"><img src="..." class="d-block w-100" alt="..."> </div>
<div class="card-body">
<h5 class="card-title">Card title 6</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the
card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="carousel-item">
<div class="card">
<div class="img-wrapper"><img src="..." class="d-block w-100" alt="..."> </div>
<div class="card-body">
<h5 class="card-title">Card title 7</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the
card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="carousel-item">
<div class="card">
<div class="img-wrapper"><img src="..." class="d-block w-100" alt="..."> </div>
<div class="card-body">
<h5 class="card-title">Card title 8</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the
card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="carousel-item">
<div class="card">
<div class="img-wrapper"><img src="..." class="d-block w-100" alt="..."> </div>
<div class="card-body">
<h5 class="card-title">Card title 9</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the
card's content.</p>
Go somewhere
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
JS :
/** medias carousel **/
var multipleCardCarousel = document.querySelector(
"#carouselExampleControls"
);
if (window.matchMedia("(min-width: 768px)").matches) {
var carousel = new bootstrap.Carousel(multipleCardCarousel, {
interval: false,
});
var carouselWidth = $(".carousel-inner")[0].scrollWidth;
var cardWidth = $(".carousel-item").width();
var scrollPosition = 0;
$("#carouselExampleControls .carousel-control-next").on("click", function () {
if (scrollPosition < carouselWidth - cardWidth * 4) {
scrollPosition += cardWidth;
$("#carouselExampleControls .carousel-inner").animate(
{scrollLeft: scrollPosition},
600
);
}
});
$("#carouselExampleControls .carousel-control-prev").on("click", function () {
if (scrollPosition > 0) {
scrollPosition -= cardWidth;
$("#carouselExampleControls .carousel-inner").animate(
{scrollLeft: scrollPosition},
600
);
}
});
} else {
$(multipleCardCarousel).addClass("slide");
}
CSS:
.carousel-inner {
padding: 1em;
}
.card {
margin: 0 0.5em;
box-shadow: 2px 6px 8px 0 rgba(22, 22, 26, 0.18);
border: none;
}
.carousel-control-prev,
.carousel-control-next {
background-color: #e1e1e1;
width: 6vh;
height: 6vh;
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
}
#media (min-width: 768px) {
.carousel-item {
margin-right: 0;
flex: 0 0 33.333333%;
display: block;
}
.carousel-inner {
display: flex;
}
}
.card .img-wrapper {
max-width: 100%;
height: 13em;
display: flex;
justify-content: center;
align-items: center;
}
.card img {
max-height: 100%;
}
#media (max-width: 767px) {
.card .img-wrapper {
height: 17em;
}
}
I have 2 divs like this belonging to different teams. All of them has different names and ids
<div id="joinville">
<div class="gk">
<div id="john">
<img src:xxx ">
<h6 class="namejoinville ">John</h6>
</div>
<div id="jake ">
<img src:xxx">
<h6 class="namejoinville">Jake</h6>
</div>
<div id="allan">
<img src:xxx ">
<h6 class="namejoinville ">Allan</h6>
</div>
</div>
</div>
<div id="thunder ">
<div class="gk ">
<div id="amilcar ">
<img src:xxx">
<h6 class="namethunder">Amilcar</h6>
</div>
<div id="peter">
<img src:xxx ">
<h6 class="namethunder ">Peter</h6>
</div>
<div id="jm ">
<img src:xxx">
<h6 class="namethunder">James</h6>
</div>
</div>
</div>
Them I have this:
<div id="onethree">
<div id="grteam">
<img src="xxx"">
<h6 id="j1">GK</h6>
</div>
I want to whenever I click on one of the player to change the "grteam" div to the one selected.
How can i make this with js?
Sorry, if this is basic stuff but i'm still a begginner
when you click on the player name his data moves to #grteam
document.querySelectorAll('.gk div h6').forEach(player => {
player.addEventListener('click', updateSelectedPlayer, this);
});
function updateSelectedPlayer(player) {
let greatPlayerImg = document.querySelector('#grteam>img'),
greatPlayerName = document.querySelector('#grteam>h6'),
selectedPlayerImg = player.target.parentNode.querySelector('img').src,
selectedPlayerName = player.target.innerHTML;
greatPlayerImg.src = selectedPlayerImg;
greatPlayerName.innerHTML = selectedPlayerName;
}
<div id=Joinville>`
<div class="gk">
<div id="john">
<img src='xxx'>
<h6 class="namejoinville">John</h6>
</div>
<div id="jake">
<img src='xxx'>
<h6 class="namejoinville">Jake</h6>
</div>
<div id="allan">
<img src='xxx'>
<h6 class="namejoinville">Allan</h6>
</div>
</div>
</div>
<div id=Joinville>`
<div class="gk">
<div id="amilcar">
<img src='xxx'>
<h6 class="namethunder">Amilcar</h6>
</div>
<div id="peter">
<img src='xxx'>
<h6 class="namethunder">Peter</h6>
</div>
<div id="jm">
<img src='xxx'>
<h6 class="namethunder">James</h6>
</div>
</div>
</div>
<div id="onethree">
<div id="grteam">
<img src="xxx">
<h6 id="j1">GK</h6>
</div>
</div>
I suggest as a beginner that you get used to using common class names for similar elements
Here I have two class="team" and each team has a group of class="player" and each player has an inner class="player-name"
Note that the id on player elements is irrelevant this way
You can add other classes as well but this helps styling the structure and makes the javascript simpler to traverse these common items
Working example without the images. You can extend this to work with those yourself
const players = document.querySelectorAll('.player')
players.forEach(function(el) {
el.addEventListener('click', function(e) {
// name of selected player
const name = el.querySelector('.player-name').textContent;
// add selected name to grteam
document.querySelector('#j1').textContent = name;
// remove active class from players
players.forEach(function(el) {
el.classList.remove('active')
})
// add active class to selected player
el.classList.add('active')
})
})
#container{display:flex}
.team{flex-basis:50%;padding:.5em}
h6{ font-size: 1em; margin:0}
.player{ border:2px solid #ccc; padding:.5em; margin-bottom:1em}
.player.active{border-color:red}
<div id="grteam">
Active: <strong id="j1">None</strong>
</div>
<div id="container">
<div class="team">
<div class="player">
<h6 class="player-name">John</h6>
</div>
<div class="player">
<h6 class="player-name">Jake</h6>
</div>
<div class="player">
<h6 class="player-name">Allan</h6>
</div>
</div>
<div class="team">
<div class="player">
<h6 class="player-name">Amilcar</h6>
</div>
<div class="player">
<h6 class="player-name">Peter</h6>
</div>
<div class="player">
<h6 class="player-name">James</h6>
</div>
</div>
</div>
My html file is as below
<div id="sidebar" style="top: 100px;">
<div class="items">
<div class="item hentry selected" itemscope="" itemtype="http://schema.org/BlogPosting" data-id="3714235398193725034">
<img class="thumbnail" src="http://4.bp.blogspot.com/-FLnjwm6youQ/UUGhQei8KqI/AAAAAAAAAUE/nEl-5V5IcDw/s30-p/1.jpg" style="width: 30px; height: 30px;">
<h3 class="title entry-title" itemprop="name">
art1
</h3>
</div>
<div class="item hentry" itemscope="" itemtype="http://schema.org/BlogPosting" data-id="179325489509322215">
.
.
.
</div>
</div>
</div>
The html has a div with id sidebar
Under that there is another div with class items
Under that there are multiple divs with class item
Under each div with class item I have a h3 with class title
Under h3 tag I have 'a' tag
I need to get the href values of 'a' tags under all divs with class item.
I would appreciate some help as to how to do the same.
Thanks
Once try with inline jQuery:
$.each($("#sidebar .items .item h3 a"),function(a,b){console.log($(b).attr("href"));});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sidebar" style="top: 100px;">
<div class="items">
<div class="item hentry selected" itemscope="" itemtype="http://schema.org/BlogPosting" data-id="3714235398193725034">
<img class="thumbnail" src="http://4.bp.blogspot.com/-FLnjwm6youQ/UUGhQei8KqI/AAAAAAAAAUE/nEl-5V5IcDw/s30-p/1.jpg" style="width: 30px; height: 30px;">
<h3 class="title entry-title" itemprop="name">
art1
</h3>
</div>
<div class="item hentry" itemscope="" itemtype="http://schema.org/BlogPosting" data-id="179325489509322215">
<img class="thumbnail" src="http://4.bp.blogspot.com/-FLnjwm6youQ/UUGhQei8KqI/AAAAAAAAAUE/nEl-5V5IcDw/s30-p/1.jpg" style="width: 30px; height: 30px;">
<h3 class="title entry-title" itemprop="name">
art2
</h3>
</div>
</div>
</div>
You can first get all divs with class item using getElementsByClassNameand then for each div find all the anchor tags under that div using getElementsByTagName.
const itemDivs = [...document.getElementsByClassName('item')];
const hrefs = [];
itemDivs.forEach(div => {
const anchors = [...div.getElementsByTagName('a')];
if (anchors && anchors.length > 0) {
anchors.forEach(a => hrefs.push(a.href));
}
});
console.log(hrefs); // prints ["http://mywebsiteurl/2013/03/blog-post.html"]
You can try using DOMParser api
let html = `<div id="sidebar" style="top: 100px;">
<div class="items">
<div class="item hentry selected" itemscope="" itemtype="http://schema.org/BlogPosting" data-id="3714235398193725034">
<img class="thumbnail" src="http://4.bp.blogspot.com/-FLnjwm6youQ/UUGhQei8KqI/AAAAAAAAAUE/nEl-5V5IcDw/s30-p/1.jpg" style="width: 30px; height: 30px;">
<h3 class="title entry-title" itemprop="name">
art1
</h3>
</div>
<div class="item hentry" itemscope="" itemtype="http://schema.org/BlogPosting" data-id="179325489509322215">
</div>
</div>
<div class = 'item'>
<a href='http://example1.com'/>
</div>
<div class = 'noitem'>
<a href='http://example2.com'/>
</div>
</div>`
let parser = new DOMParser()
let parsed = parser.parseFromString(html, 'text/html')
let anchors = [...parsed.querySelectorAll('.item > a')]
let hrefs = anchors.map(v=> v.href)
console.log(hrefs)