We Keep Coding

How do I get the value of the first child element in Javascript?

I'm trying to get the value of the first child element from my HTML to show whenever I click on an image aka my 'services-cell" container, but it keeps saying the value is undefined.
<div class="services-cell">
<img class="services-cell_img" src="gallery/img-1.jpg" alt="">
<div class="services-cell_text">Digital Marketing</div>
</div>
Here is my Javascript
let galleryImages = document.querySelectorAll('.services-cell')
if(galleryImages) {
galleryImages.forEach(function(image){
image.onclick = function() {
console.log(galleryImages.firstElementChild.value)
}
})
}
I tried to add the img class as a variable as well, but it also says undefined. I want the console.log to print
<img class="services-cell_img" src="gallery/img-1.jpg" alt="">
I have multiple images with the same html except it just say img-2, img-3 etc. So ideally whenever I click on the other images it would print the same HTML value but just will say the image number that I clicked on

You created the array as galleryImages, but then rather than accessing the firstElementChild of the div, you're trying to access that property on the array. You need to do image.firstElementChild instead. Also, as far as I know, accessing .value of an image has no meaning, I think you meant to just do firstElementChild instead:
let galleryImages = document.querySelectorAll('.services-cell');
if (galleryImages) {
galleryImages.forEach(function (image) {
image.onclick = function() {
console.log(image.firstElementChild);
};
});
}
<div class="services-cell">
<img class="services-cell_img" src="https://s3.amazonaws.com/pix.iemoji.com/images/emoji/apple/ios-12/256/deciduous-tree.png" alt="">
<div class="services-cell_text">Digital Marketing</div>
</div>
<div class="services-cell">
<img class="services-cell_img" src="https://cdn-cloudfront.cfauthx.com/binaries/content/gallery/gg-en-us/icons/gg-tree-icon.png" alt="">
<div class="services-cell_text">Digital Marketing</div>
</div>

What you could do to achieve this is passing the event attribute as a parameter of the onclick function.
The event attribute has a target; which is the item that triggered the event. So for example:
if(galleryImages) {
galleryImages.forEach(function(image){
image.onclick = function(e) {
console.log(e.target.firstElementChild.value)
}
})
}
However instead of adding an eventListener to every element, it might be better to add one event handler on the parent - and check which item is clicked.
E.g.
<div class="parent">
<div class="services-cell">
<img class="services-cell_img" src="gallery/img-1.jpg" alt="" />
<div class="services-cell_text">Digital Marketing</div>
</div>
<div class="services-cell">
<img class="services-cell_img" src="gallery/img-2.jpg" alt="" />
<div class="services-cell_text">Digital Marketing</div>
</div>
</div>
And the javascript:
document.querySelector('.parent').addEventListener('click', function(e){
if(e.target.matches('.services-cell'){
// Do something with the e.target - which is the .services.cell
}
}

JS Dom manipulation issue

So i am creating a carousel generator framework and I want to make the implementation as simple as possible for the user. The developer is supposed to add
images without caring about design/responsiveness. The framework must take every image and insert it in a div with the classname of "slide". In this case from this code:
<div id="album" class="album">
<img src="./assets/img1.jpeg" alt="img1">
<img src="./assets/img2.jpeg" alt="img2">
<img src="./assets/img3.jpeg" alt="img3">
<img src="./assets/img4.jpeg" alt="img4">
<img src="./assets/img5.jpeg" alt="img5">
<img src="./assets/img6.jpeg" alt="img6">
</div>
the framework should generate this:
<div class="slide">
<img src="./assets/img1.jpeg" alt="img1">
</div>
<div class="slide">
<img src="./assets/img2.jpeg" alt="img2">
</div>
<div class="slide">
<img src="./assets/img3.jpeg" alt="img3">
</div>
<div class="slide">
<img src="./assets/img4.jpeg" alt="img4">
</div>
<div class="slide">
<img src="./assets/img5.jpeg" alt="img5">
</div>
<div class="slide">
<img src="./assets/img6.jpeg" alt="img6">
</div>
But the following code generates only 3 of the 6 images:
let album = document.getElementById("album");
let nextButton = document.getElementById('nextButton');
nextButton.addEventListener('', () => {
album.scrollBy(window.innerWidth, 0);
})
Object.keys(album.children).forEach(key => {
if (album.children[key].tagName === 'IMG') {
let newDiv = document.createElement('div');
newDiv.className = "slide";
newDiv.append(album.children[key]);
album.replaceChild(newDiv, album.children[key]);
}
})
and has an error:
Uncaught TypeError: Cannot read property 'tagName' of undefined
at Object.keys.forEach.key (index.js:9)
at Array.forEach (<anonymous>)
at index.js:8
and the generated carousel is:
Ideas? Thanks in advance.

This happens because .children creates a live collection of nodes so the iteration changes while you insert new children div inside the forEach
you could instead create a static collection like
let nodes = document.querySelectorAll('#album > img');
and iterate over that collection of nodes
let album = document.getElementById('album');
let nodes = document.querySelectorAll('#album > img');
Object.keys(nodes).forEach(i => {
let slide = document.createElement('div');
slide.className = 'slide';
slide.appendChild(nodes[i]);
album.appendChild(slide)
});
Codepen demo
The generated source is

Is it possible to extract image from text with jQuery or JavaScript?

Good day, I'm trying to make an article content with ckeditor. Here is an example from my input.
<p>I have two images <img alt="" src="http://localhost:84/lf//assets/images/commingsoon.png" style="height:225px; width:225px" /> and this <img alt="" src="http://localhost:84/lf//assets/images/article2.jpg" style="height:91px; width:122px" /></p>
As you can see there are two images, and i want to the first image as my thumbnail. for now, i just want to extract it .
The result from extract is something like this
http://localhost:84/lf//assets/images/commingsoon.png
var myString = '<p>I have two images <img alt="" src="http://localhost:84/lf//assets/images/commingsoon.png" style="height:225px; width:225px" /> and this <img alt="" src="http://localhost:84/lf//assets/images/article2.jpg" style="height:91px; width:122px" /></p>';
var result = (someprosess)

You can use find(), first() and attr() to access the URL of the first image from your string.
var myString = '<p>I have two images <img alt="" src="http://localhost:84/lf//assets/images/commingsoon.png" style="height:225px; width:225px" /> and this <img alt="" src="http://localhost:84/lf//assets/images/article2.jpg" style="height:91px; width:122px" /></p>';
var result = $(myString).find('img').first().attr('src');
console.log(result);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

You can use either JavaScript or jQuery to search for the first instance of an image and parse out its src
As an example, using jQuery (if there is always going to be an image in the content)
var imgPointer = $('body').find('img');
var imgSrc = imgPointer[0].attr('src');

Here you go with a solution using jQuery
console.log($('p').find('img:first').attr('src'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>I have two images <img alt="" src="http://localhost:84/lf//assets/images/commingsoon.png" style="height:225px; width:225px" /> and this <img alt="" src="http://localhost:84/lf//assets/images/article2.jpg" style="height:91px; width:122px" /></p>
Hope this will help you.

Child objects in jQuery - how to select in a variable?

it's sounds basic...I've this...
<div id="carouselBrand">
<div class="carouselSelectorLeft">O</div>
<div class="carouselWrapper">
<div class="carouselSelector">
<div class="carouselItems">
<img src="./images/dell.png" alt="">
<img src="./images/dell.png" alt="">
<img src="./images/dell.png" alt="">
<img src="./images/dell.png" alt="">
<img src="./images/dell.png" alt="">
<img src="./images/dell.png" alt="">
</div>
</div>
</div>
<div class="carouselSelectorRight">O</div>
</div>
I want to bound a click event...
$(".carouselSelectorRight").click(function() {
});
I need to select the carouselSelector, so basically: get the 1st div with class carouselSelector inside the parent of my object that's handle the click.
It's supposed to be something like this...
var select = $(event.target).parent.$('.carouselSelector');
But this is not the correct way...any suggestions ?

There are many ways for selecting the target element:
$(".carouselSelectorRight").click(function() {
var select = $(this).prev().children('.carouselSelector');
});
You can also use the closest/parent and find methods:
$(this).closest('.carouselBrand').find('.carouselSelector');
If the parent .carouselBrand element have more than 1 .carouselSelector descendant and you want to select the first one of them, you can use the first method:
select.first(); // where select is the returned collection by above queries
Note that if you want to use the event object you should pass it to your event handler:
$(".carouselSelectorRight").click(function(event) {

Simple .is() not working as expected

I'm trying to loop through images, and if the last image has a class of .active, I start again. However, it is not working at all:
http://jsfiddle.net/tmyie/VE75U/
img.click(function () {
$(this).removeClass('active').next('img').addClass('active');
if ($('.active').is(':last-child')) {
img.first().addClass('active');
}
});

To check if the last image has the class .active you have to almost reverse it and first get the last image and then check for the class, and since the last-child isn't an image, that wont work
if ( $('.module.m-slide img:last').hasClass('.active') ) { ...

You have 2 issues in your code:
When you click on last image this code:
$(this).removeClass('active').next('img').addClass('active');
Will not add active class to anything, because .next('img') will return an empty array. So next line will not work too:
if ($('.active').is(':last-child'))
Because there is no active elements.
I believe you need to fix it in the following way:
if ($(this).is(':last-child'))
Next thing: none of your images can be a :last-child, because even your last image is not a last child! Look carefully at your html code:
<div class="module m-slide">
<img src="http://placehold.it/1200x800&text=1" alt="" />
<img src="http://placehold.it/1200x800&text=2" alt="" />
<img src="http://placehold.it/1200x800&text=3" alt="" />
<div class="m-slide-ctrl"></div>
</div>
Your last child is <div class="m-slide-ctrl"></div>
I suggest to change it in the follosing way:
<div class="module m-slide">
<div class="m-slide-ctrl"></div>
<img src="http://placehold.it/1200x800&text=1" alt="" />
<img src="http://placehold.it/1200x800&text=2" alt="" />
<img src="http://placehold.it/1200x800&text=3" alt="" />
</div>
Demo