We Keep Coding

Div isn't displayed after JavaScript element is created

I'm trying to make a div labeled called .overlay-text to be shown when a video is clicked but it isn't showing up according to its content.
const elementsClicked = document.querySelectorAll(".thumbnail, .overlay-text");
const currentThumb = document.querySelector('.container-projects');
elementsClicked.forEach(element => {
element.addEventListener("click", function() {
const parent = this.closest(".item-project");
const thumbnailCurrent = parent.querySelector(".thumbnail-current");
const video = parent.querySelector(".vid");
if (this.classList.contains("thumbnail)) {
if (this.tagName === "VIDEO") {
thumbnailCurrent.innerHTML = "";
const videoCloned = document.createElement("video");
videoCloned.setAttribute("controls", "");
videoCloned.setAttribute("src", this.getAttribute("src"));
videoCloned.setAttribute("type", this.getAttribute("type"));
videoCloned.classList.add("vid-current");
thumbnailCurrent.appendChild(videoCloned);
videoCloned.addEventListener('play', event => {
const videos = currentThumb.querySelectorAll('video');
videos.forEach(v => {
if (v !== event.target) {
v.pause();
}
});
});
videoCloned.addEventListener('pause', event => {
this.parentNode.querySelector(".overlay-text").classList.remove("hidden");
});
videoCloned.play()
} else {
thumbnailCurrent.innerHTML = this.outerHTML;
}
}
else {
video.classList.toggle("hidden");
this.classList.toggle("hidden");
if (video.paused) {
video.play();
} else {
video.pause();
}
}
});
});
const videos = currentThumb.querySelectorAll('video');
videos.forEach(video => {
video.addEventListener("play", function() {
this.parentNode.querySelector(".overlay-text").classList.add("hidden");
});
video.addEventListener("pause", function() {
this.parentNode.querySelector(".overlay-text").classList.remove("hidden");
});
video.addEventListener('play', event => {
videos.forEach(v => {
if (v !== event.target) {
v.pause();
}
});
});
});
This function above makes a gallery works, showing the video or image up when is clicked inside a div labeled .thumbnail-current. It also let the video play if is clicked in its overlay-text and toggle between hidden or not if it is playing or paused.
Here's the HTML code:
<div class="thumbnail-current">
<video src="video.mp4" type="video/mp4" class="vid" id="video1" controls></video>
<div class="overlay-text" id="text1">
<h4>One title</h4>
<p>One description.</p>
</div>
</div>
<div class="container-thumbnail">
<p>&lt</p>
<video src="video.mp4" type="video/mp4" class="thumbnail vid-mini" id="mini1"></video>
<img src="images/image (2).jpg" class="thumbnail" id="mini2" alt="">
<img src="images/image (3).jpg" class="thumbnail" id="mini3" alt="">
<img src="images/image (4).jpg" class="thumbnail" id="mini4" alt="">
<img src="images/image (5).jpg" class="thumbnail" id="mini5" alt="">
<img src="images/image (6).jpg" class="thumbnail" id="mini6" alt="">
<p>&gt</p>
</div>
</div>
<div class="item-project text">
<div class="thumbnail-current">
<video src="video2.mp4" class="vid" id="video2" controls></video>
<div class="overlay-text" id="text2">
<h4>Another title</h4>
<p>Another title.</p>
</div>
</div>
<div class="container-thumbnail">
<p>&lt</p>
<video src="video2.mp4" class="thumbnail vid-mini" id="mini1"></video>
<img src="images/image (2).jpg" class="thumbnail" id="mini2" alt="">
<img src="images/image (3).jpg" class="thumbnail" id="mini3" alt="">
<img src="images/image (4).jpg" class="thumbnail" id="mini4" alt="">
<img src="images/image (5).jpg" class="thumbnail" id="mini5" alt="">
<img src="images/image (6).jpg" class="thumbnail" id="mini6" alt="">
<p>&gt</p>
</div>
</div>
I have tried several lines of codes, but it isn't working.
I want .overlay-text to be shown when videoCloned is created in the .miniatura-current div.
Thanks.

I want to hide all element with <a> tag and contain a link

Please I want to hide <a> that contains a link sabdel.com .
I used the below javascript code but it doesn't work
window.addEventListener=()=>{
var elem=document.querySelectorAll("a");
var i;
for(i=0;i<elem.length;i++){
var obj=elem[i];
if(obj.innerHTML.toString().includes('sabdel.com')){
obj.style.display="none";
}
}
}
<div>
<div>
<div>
<div>
<img src="//ae01.alicdn.com/kf/Haabbc1065ea449668ced4bf88021f4aea.png">
<p></p>
<div style="margin-left:36.847599164927%;margin-top:-30.27139874739%;width:19.72860125261%">
<a href="//www.sabdel.com/item/detail/4000105891117.html" target="_blank" rel="noopener">
<img src="//ae01.alicdn.com/kf/He3f2750635b24a4d9e30666180dfacc89.png">
</a>
</div>
<div style="margin-left:57.306889352818%;margin-top:-29.958246346555%;width:19.72860125261%">
<a href="//www.sabdel.com/item/detail/4000147845779.html" target="_blank" rel="noopener">
<img src="//ae01.alicdn.com/kf/He3f2750635b24a4d9e30666180dfacc89.png">
</a>
</div>
<div style="margin-left:77.76617954071%;margin-top:-29.958246346555%;width:19.72860125261%">
<a href="//www.sabdel.com/item/detail/4000990281325.html" target="_blank" rel="noopener">
<img src="//ae01.alicdn.com/kf/He3f2750635b24a4d9e30666180dfacc89.png">
</a>
</div>
<div style="margin-top:0.31315240083507%;height:0;width:0"></div>
</div>
<div>
<img src="//ae01.alicdn.com/kf/H69979517a8a248e9a84aec8986854e277.png">
<p></p>
<div style="margin-left:1.5657620041754%;margin-top:-31.524008350731%;width:22.964509394572%">
<a href="//www.sabdel.com/item/detail/4000985761425.html" target="_blank" rel="noopener">
<img src="//ae01.alicdn.com/kf/H6dac222274304fc4afe554f53ea88bcds.png">
</a>
</div>
<div style="margin-left:26.096033402923%;margin-top:-30.793319415449%;width:22.964509394572%">
<a href="//www.sabdel.com/item/detail/4000224026872.html" target="_blank" rel="noopener">
<img src="//ae01.alicdn.com/kf/H6dac222274304fc4afe554f53ea88bcds.png">
</a>
</div>
<div style="margin-left:50.62630480167%;margin-top:-30.793319415449%;width:22.964509394572%">
<a href="//www.sabdel.com/item/detail/1005001597400364.html" target="_blank" rel="noopener">
<img src="//ae01.alicdn.com/kf/H6dac222274304fc4afe554f53ea88bcds.png">
</a>
</div>
<div style="margin-left:75.156576200418%;margin-top:-30.793319415449%;width:22.964509394572%">
<a href="//www.sabdel.com/item/detail/4001044974112.html" target="_blank" rel="noopener">
<img src="//ae01.alicdn.com/kf/H6dac222274304fc4afe554f53ea88bcds.png">
</a>
</div>
<div style="margin-top:0.73068893528184%;height:0;width:0"></div>
</div>

First of all, you are incorrectly using addEventListener. Second, you must check the href attribute, not innerHTML:
window.addEventListener("yourEvent", () => {
var elem=document.querySelectorAll("a");
for(var i = 0; i < elem.length; i++) {
if(elem[i].href.includes('sabdel.com')) {
elem[i].style.display="none";
}
}
}
Replace yourEvent with the event you want to listen with. For example, if you are listening for a click event, replace it with click.

Do you mean like this ?
window.addEventListener = () => {
var tags = document.getElementsByTagName("a");
for (var i = 0; i < tags.length; i++) {
var attributeValue = tags[i].getAttribute('href');
if (attributeValue.includes('sabdel.com')) {
tags[i].style.display = 'none';
}
}
}

How get the original size images (height and width) from your href and put them on your attr. using jquery

hello friends i am trying to get the size (height and width) of an image from an hrf and put these values ​​in its attribute
This is driving me crazy
this is my html:
<figure>
<a href="image-large-1.jpg">
<img src="image-small-1.jpg"/>
</a>
</figure>
<figure>
<a href="image-large-2.jpg">
<img src="image-small-2.jpg"/>
</a>
</figure>
<figure>
<a href="image-large-3.jpg">
<img src="image-small-3.jpg"/>
</a>
</figure>
this is what I want :
<figure>
<a href="image-large-1.jpg" original-size="1000x800"> //the sizes are example
<img src="image-small-1.jpg"/>
</a>
</figure>
<figure>
<a href="image-large-2.jpg" original-size="1200x700"> //the sizes are example
<img src="image-small-2.jpg"/>
</a>
</figure>
<figure>
<a href="image-large-3.jpg" original-size="900x980"> //the sizes are example
<img src="image-small-3.jpg"/>
</a>
</figure>
the "original-size" attribute I want to get it from " a hrf "
I was trying with this code that I found here, I get the original size of the image-large from the href (in the console.log) but I cannot print them in the html
help me please
$(".containerGallery figure a").each(function() {
var imgSrc, imgW, imgH;
function myFunction(image){
var img = new Image();
img.src = image;
img.onload = function() {
return {
src:image,
width:this.width,
height:this.height};
}
return img;
}
var x = myFunction($(this).attr('href'));
x.addEventListener('load',function(){
imgSrc = x.src;
imgW = x.width;
imgH = x.height;
});
$(this).each(function() {
x.addEventListener('load',function(){
console.log(imgW+'x'+imgH);
$(this).attr('original-size', imgW+'x'+imgH);
});
});
});

The JavaScript code in the question is overly complex and redundant.
Here's some simplified code that accomplishes the same thing.
// get all <a> elements inside <figure> elements
const atags = Array.from(document.querySelectorAll('figure a'));
// iterate over every <a> tag
atags.forEach(atag => {
// create blank image element
var img = new Image();
// when the image loads, store its dimensions to the atag's
// `data-original-size` attribute
img.addEventListener('load', () => {
let imgW = img.width,
imgH = img.height;
atag.dataset.originalSize = `${imgW}x${imgH}`;
console.log('atag:', atag);
});
// load image from atag's href
img.src = atag.href;
});
<figure>
<a href="https://i.picsum.photos/id/1077/200/300.jpg">
<img src="https://via.placeholder.com/40" />
</a>
</figure>
<figure>
<a href="https://i.picsum.photos/id/913/200/200.jpg">
<img src="https://via.placeholder.com/50" />
</a>
</figure>
<figure>
<a href="https://i.picsum.photos/id/1058/100/100.jpg">
<img src="https://via.placeholder.com/60" />
</a>
</figure>

Here is script that does absolutely what you're looking for!
const getOriginalSize = (target, url) => {
const image = document.createElement("img");
image.src = url;
image.onload = function(){
target.setAttribute("original-size", `${image.naturalWidth}x${image.naturalHeight}`);
}
return image;
}
<figure>
<a href="https://images.sftcdn.net/images/t_app-cover-l,f_auto/p/befbcde0-9b36-11e6-95b9-00163ed833e7/260663710/the-test-fun-for-friends-screenshot.jpg">
<img src="https://images.sftcdn.net/images/t_app-cover-l,f_auto/p/befbcde0-9b36-11e6-95b9-00163ed833e7/260663710/the-test-fun-for-friends-screenshot.jpg"/>
</a>
</figure>
<figure>
<a href="https://www.velior.ru/wp-content/uploads/2009/05/Test-Computer-Key-by-Stuart-Miles.jpg">
<img src="https://www.velior.ru/wp-content/uploads/2009/05/Test-Computer-Key-by-Stuart-Miles.jpg"/>
</a>
</figure>
<script>
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll("figure").forEach( (figure) => {
figure.querySelectorAll("a[href]").forEach( function(targetAhref) {
getOriginalSize(targetAhref, targetAhref.href);
console.warn("image loaded and size registred!");
} );
} );
} );
</script>

querySelectorAll (list) retrieve specific values inside each object by clicking

from a querySelectorAll I retrieve every objects from a specific class (list - all the same but with specific value inside...) :
- I create buttons (event) for each objects
- Each object have a specific value
- When clicking on one object. I need to show this specific value contained inside this object.
I'm currently doing it with pure javascript
I use tree HMTL node to move inside and take the data. But whenever, these objects are clicked it's only the last object value come up...
----- EDIT : html added-----
function hello(d)
{
alert("" + d);
}
var Images = document.querySelectorAll('.block-image_carousel-single > figcaption');
for (var i = 0; i < Images.length; i++) {
var Image = Images[i];
Image.addEventListener('click', function (event) {
event.preventDefault();
hello(Image.textContent);
}, false);
}
<div class="block-image_carousel">
<div>
<div class="block-main-image_carousel-display">
<img src="img.png" class="block-image_carousel-display">
<figcaption> Image 1 </figcaption>
</div>
<div class="block-image_carousel-single">
<img src="img.png">
<figcaption> Image 1 </figcaption>
</div>
<div class="block-image_carousel-single">
<img src="img.png">
<figcaption> Image 2 </figcaption>
</div>
<div class="block-image_carousel-single">
<img src="img.png">
<figcaption> Image 3 </figcaption>
</div>
<div class="block-image_carousel-single">
<img src="img.png">
<figcaption> Image 4 </figcaption>
</div>
</div>
</div>
When clicking on one object. I need to show this specific value contained inside this object.
But whenever, these objects are clicked it's only the last object value come up...
ANSWER : use let instead of var for image.

Remove the for loop and use the forEach() method instead to add a click listener to each element and extract the textContent from each figcaption inside the element.
Check and run the following Code Snippet for a practical example of what I described above:
function hello(d) { alert("" + d) }
var images = document.querySelectorAll('.block-image_carousel-single > figcaption');
images.forEach(image => {
image.addEventListener('click', function(e) {
e.preventDefault();
hello(image.textContent);
}, false);
});
<div class="block-image_carousel">
<div>
<div class="block-main-image_carousel-display">
<img src="https://picsum.photos/1000/200" class="block-image_carousel-display">
<figcaption> Image 1 </figcaption>
</div>
<div class="block-image_carousel-single">
<img src="https://picsum.photos/100/100">
<figcaption> Image 1 </figcaption>
</div>
<div class="block-image_carousel-single">
<img src="https://picsum.photos/100/100">
<figcaption> Image 2 </figcaption>
</div>
<div class="block-image_carousel-single">
<img src="https://picsum.photos/100/100">
<figcaption> Image 3 </figcaption>
</div>
<div class="block-image_carousel-single">
<img src="https://picsum.photos/100/100">
<figcaption> Image 4 </figcaption>
</div>
</div>
</div>

Try this
function hello(f,d)
{
alert(f,d);
}
var Images = document.querySelectorAll('.block-image_carousel-single > figcaption');
for (var i = 0; i < Images.length; i++) {
var Image = Images[i];
Image.addEventListener('click', function (event) {
event.preventDefault();
hello(this, Image.textContent);
}, false);
}

Your code is overwriting the "Images" var in the for loop, and only the last instance in the loop is being saved to Images. Also you defined Images twice?
Try modifying your code to this:
function hello(f,d)
{
alert(f,d);
}
var Images = document.querySelectorAll('.block-image_carousel-single > figcaption');
for (var i = 0; i < Images.length; i++) {
Images[i].addEventListener('click', function (event) {
event.preventDefault();
hello(this, Images.textContent);
},false);
}

Your issue is variable scoping, when the for loop ends the variable contains the last value.
You may use this.textContent in the event handler instead of Image.textContent. Or you may use let instead of var in the for loop. Another way to solve it is with IIFE
function hello(d) {
alert("" + d);
}
var Images = document.querySelectorAll('.block-image_carousel-single > figcaption');
for (var i = 0; i < Images.length; i++) {
var Image = Images[i];
Image.addEventListener('click', function (event) {
event.preventDefault();
hello(this.textContent);
}, false);
}
//
// ...loop using let
//
for (let i = 0; i < Images.length; i++) {
var Image = Images[i];
Image.addEventListener('click', function (event) {
event.preventDefault();
hello(Images[i].textContent);
}, false);
}
<div class="block-image_carousel">
<div>
<div class="block-image_carousel-single">
<img src="/media/images/irbOgrandOparis-17-png_956449_1505405590__B-.max-940x640.png" class="block-image_carousel-display">
<figcaption> Image 0 </figcaption>
</div>
<div class="block-image_carousel-single">
<img src="/media/images/irbOgrandOparis-17-png_956449_1505405590__B-.max-940x640.png">
<figcaption> Image 1 </figcaption>
</div>
<div class="block-image_carousel-single">
<img src="/media/images/irbOgrandOparis-17-png_956449_1505405590__B-.max-940x640.png">
<figcaption> Image 2 </figcaption>
</div>
<div class="block-image_carousel-single">
<img src="/media/images/irbOgrandOparis-17-png_956449_1505405590__B-.max-940x640.png">
<figcaption> Image 3 </figcaption>
</div>
<div class="block-image_carousel-single">
<img src="/media/images/irbOgrandOparis-17-png_956449_1505405590__B-.max-940x640.png">
<figcaption> Image 4 </figcaption>
</div>
</div>
</div>

How to get src values of set of images inside div with pure JavaScript?

I have a list of elements which contains an image & few more elements. I need to get the src of the image. HTML code is like this.
<div class="flex-card">
<div class="flex-figure">
<a href="">
<figure class="image">
<span class="fig-lable">Colombo</span>
<img src="https://wenuka.com/media/visit-fl/banner-img.jpg" class="tile-media"/>
</figure>
</a>
</div>
</div>
I tried to get the src of the image with this code.
var elem = document.getElementsByClassName("flex-figure");
for (var i = 0; i <= elem.length; i++) {
var imgTag = elem[i].getElementsByTagName('img')[0];
var srcLink = imgTag.src;
console.log(srcLink);
}
It gives the following error.
Uncaught TypeError: Cannot read property 'src' of undefined

You have an off-by-one error, but why not use querySelectorAll instead, it'll be a lot cleaner:
const imgs = document.querySelectorAll('.flex-figure img');
imgs.forEach(img => console.log(img.src));
<div class="flex-card">
<div class="flex-figure">
<a href="">
<figure class="image">
<span class="fig-lable">Colombo</span>
<img src="https://wenuka.com/media/visit-fl/banner-img.jpg" class="tile-media"/>
</figure>
</a>
</div>
</div>
querySelectorAll is a lot more flexible than the getElementsBy* methods, and also returns a static NodeList which can be directly iterated over, unlike the other methods (which return live HTMLCollections, which can be difficult to deal with).

Change
for (var i = 0; i <= elem.length; i++) {
To
for (var i = 0; i < elem.length; i++) {
var elem = document.getElementsByClassName("flex-figure");
for (var i = 0; i < elem.length; i++) {
var imgTag = elem[i].getElementsByTagName('img')[0];
var srcLink = imgTag.src;
console.log(srcLink);
}
<div class="flex-card">
<div class="flex-figure">
<a href="">
<figure class="image">
<span class="fig-lable">Colombo</span>
<img src="https://wenuka.com/media/visit-fl/banner-img.jpg" class="tile-media"/>
</figure>
</a>
</div>
</div>

console.log(document.getElementsByTagName("IMG")[0].src)
<div class="flex-card">
<div class="flex-figure">
<a href="">
<figure class="image">
<span class="fig-lable">Colombo</span>
<img src="https://wenuka.com/media/visit-fl/banner-img.jpg" class="tile-media"/>
</figure>
</a>
</div>
</div>