We Keep Coding

Struggling with DOM traversing. How can I select the "#img" element?

I am trying to attach an event listener to multiple buttons, using a for loop. The event function will "flip" my card by hiding the front side.
<div class="team__box">
<div class="front" id="front">
<img
src="/assets/avatar-drake.jpg"
alt="headshot"
class="front__img"
/>
<h3 class="front__name">Drake Heaton</h3>
<p class="front__info">Business Development Lead</p>
</div>
<div class="back hide" id="back">
<h3 class="back__name">Drake Heaton</h3>
<p class="back__quote">
“Hiring similar people from similar backgrounds is a surefire way
to stunt innovation.”
</p>
<div class="back__social">
<a href="#" class="back__social-link"
><img
src="/assets/icon-twitter.svg"
alt="twitter"
class="back__social-img"
/></a>
<a href="#" class="back__social-link"
><img
src="/assets/icon-linkedin.svg"
alt="linkedin"
class="back__social-img"
/></a>
</div>
</div>
<button class="team__btn front__btn" id="btn">
<img
src="/assets/icon-cross.svg"
alt="close button"
class="btn__img"
id="img"
/>
</button>
</div>
<div class="team__box">
<div class="front" id="front">
<img
src="/assets/avatar-griffin.jpg"
alt="headshot"
class="front__img"
/>
<h3 class="front__name">Griffin Wise</h3>
<p class="front__info">Lead Marketing</p>
</div>
<div class="back hide" id="back">
<h3 class="back__name">Griffin Wise</h3>
<p class="back__quote">
“Unique perspectives shape unique products, which is what you need
to survive these days.”
</p>
<div class="back__social">
<a href="#" class="back__social-link"
><img
src="/assets/icon-twitter.svg"
alt="twitter"
class="back__social-img"
/></a>
<a href="#" class="back__social-link"
><img
src="/assets/icon-linkedin.svg"
alt="linkedin"
class="back__social-img"
/></a>
</div>
</div>
<button class="team__btn front__btn" id="btn">
<img
src="/assets/icon-cross.svg"
alt="close button"
class="btn__img"
id="img"
/>
</button>
</div>
Javascript below. It is almost all working, except when I click directly on the "#img" element. I would assume
const btn = document.getElementsByClassName("team__btn");
for (i = 0; i < btn.length; i++) {
btn[i].addEventListener("click", function (e) {
console.log(e.target);
let front = e.target.closest("div").firstElementChild;
let back = e.target.closest("div").children[1];
if (e.target !== "img") {
img = e.target.firstElementChild;
} else {
img = e.target;
}
front.classList.toggle("hide");
back.classList.toggle("hide");
if (front.classList.contains("hide")) {
img.src = "./assets/icon-close.svg";
} else {
img.src = "./assets/icon-cross.svg";
}
});
}
Assuming I am clicking directly on the '#img" element, I tried to assign that targetted element to img variable through an if/else statement. Using that, I would expect to be able to reassign the src property of the img variable, depending on whether the front or backside of the card is hidden.
However, when I click directly on the img element I receive the following error:
"Uncaught TypeError: Cannot set properties of null (setting 'src')
at HTMLButtonElement."
What gives?

Replace your line e.target !== "img" to e.target.nodeName !== "IMG".
for (i = 0; i < btn.length; i++) {
btn[i].addEventListener("click", function (e) {
console.log(e.target);
let front = e.target.closest("div").firstElementChild;
let back = e.target.closest("div").children[1];
let img;
if (e.target.nodeName !== "IMG") {
img = e.target.firstElementChild;
} else {
img = e.target;
}
console.log();
front.classList.toggle("hide");
back.classList.toggle("hide");
if (front.classList.contains("hide")) {
img.src = "./assets/icon-close.svg";
} else {
img.src = "./assets/icon-cross.svg";
}
});
}
<div class="team__box">
<div class="front" id="front">
<img src="/assets/avatar-drake.jpg" alt="headshot" class="front__img" />
<h3 class="front__name">Drake Heaton</h3>
<p class="front__info">Business Development Lead</p>
</div>
<div class="back hide" id="back">
<h3 class="back__name">Drake Heaton</h3>
<p class="back__quote">
“Hiring similar people from similar backgrounds is a surefire way
to stunt innovation.”
</p>
<div class="back__social">
<a href="#" class="back__social-link"><img src="/assets/icon-twitter.svg" alt="twitter"
class="back__social-img" /></a>
<a href="#" class="back__social-link"><img src="/assets/icon-linkedin.svg" alt="linkedin"
class="back__social-img" /></a>
</div>
</div>
<button class="team__btn front__btn" id="btn">
<img src="/assets/icon-cross.svg" alt="close button" class="btn__img" id="img" />
</button>
</div>
<div class="team__box">
<div class="front" id="front">
<img src="/assets/avatar-griffin.jpg" alt="headshot" class="front__img" />
<h3 class="front__name">Griffin Wise</h3>
<p class="front__info">Lead Marketing</p>
</div>
<div class="back hide" id="back">
<h3 class="back__name">Griffin Wise</h3>
<p class="back__quote">
“Unique perspectives shape unique products, which is what you need
to survive these days.”
</p>
<div class="back__social">
<a href="#" class="back__social-link"><img src="/assets/icon-twitter.svg" alt="twitter"
class="back__social-img" /></a>
<a href="#" class="back__social-link"><img src="/assets/icon-linkedin.svg" alt="linkedin"
class="back__social-img" /></a>
</div>
</div>
<button class="team__btn front__btn" id="btn">
<img src="/assets/icon-cross.svg" alt="close button" class="btn__img" id="img" />
</button>
</div>

how to use same jQuery function on multiple group of lists

I have Unordered list, and each item of the list has a list of images. I wrote a jQuery function to operate slider using prev and next. The function working write when there is only one list of images. Nonetheless, when I have list and each item has list of images when ever I clicked on any slider only the first slider is working regardless on which slider I clicked. my question is, How can I modify the jQuery function to operate only for the slider that I clicked on and not other sliders for other group of images.
Here is the html code:
<ul class="results">
<li class="result-row">
<!-- image box -->
<a href="#">
<div class="result-image-act" >
<img src="1.jpg" class="active">
<img src="2.jpg">
<img src="3.jpg">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
</div>
<div class="swipe-wrap">
<div class="swipe-wrap-lef">
<a href="#">
<div class="swipe-prev">
<p><</p>
</div>
</a>
</div>
<div class="swipe-wrap-rig">
<a href="#">
<div class="swipe-next">
<p>></p>
</div>
</a>
</div>
</div>
</a>
</li>
<!-- -->
<li class="result-row">
<a href="#">
<div class="result-image-act">
<img src="1.jpg" class="active">
<img src="2.jpg">
<img src="3.jpg">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
</div>
<div class="swipe-wrap">
<div class="swipe-wrap-lef">
<a href="#">
<div class="swipe-prev">
<p><</p>
</div>
</a>
</div>
<div class="swipe-wrap-rig">
<a href="#">
<div class="swipe-next">
<p>></p>
</div>
</a>
</div>
</div>
</a>
</li>
</ul>
Here is the jQuery function:
$(document).ready(function() {
$('.swipe-prev').click(function(){
console.log("Prev"); // Print "Prev" on click swipe-prev
var prevImg = $('img.active').prev('.result-image-act img');
if(prevImg.length == 0) {
prevImg = $('.result-image-act img:last');
}
$('img.active').removeClass('active');
prevImg.addClass('active');
});
$('.swipe-next').click(function() {
console.log("Next"); // Print "Next" on click swipe-next
var nextImg = $('img.active').next('.result-image-act img');
if(nextImg.length == 0) {
nextImg = $('.result-image-act img:first');
}
$('img.active').removeClass('active');
nextImg.addClass('active');
});
});

You may reduce everything to only one event handler.
$('.swipe-prev, .swipe-next').on('click', function (e) {
var op = ($(this).is('.swipe-prev')) ? 'prev' : 'next';
var firtOrlast = ($(this).is('.swipe-prev')) ? 'last' : 'first';
var imgList = $(this).closest('.result-row');
var currImg = imgList.find('.result-image-act img.active');
var nextImg = currImg[op]();
if (nextImg.length == 0) {
nextImg = imgList.find('.result-image-act img:' + firtOrlast);
}
currImg.removeClass('active');
nextImg.addClass('active');
});
.active {
padding: 3px;
border: 1px solid #021a40;
background-color: #ff0;
}
.swipe-wrap {
display: inline-flex;
}
.swipe-wrap > div {
padding-right: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="results">
<li class="result-row">
<!-- image box -->
<a href="#">
<div class="result-image-act">
<img src="https://dummyimage.com/100x100/000/fff&text=1" class="active">
<img src="https://dummyimage.com/100x100/000/fff&text=2">
<img src="https://dummyimage.com/100x100/000/fff&text=3">
<img src="https://dummyimage.com/100x100/000/fff&text=4">
</div>
<div class="swipe-wrap">
<div class="swipe-wrap-lef">
<a href="#">
<div class="swipe-prev">
<p><</p>
</div>
</a>
</div>
<div class="swipe-wrap-rig">
<a href="#">
<div class="swipe-next">
<p> ></p>
</div>
</a>
</div>
</div>
</a>
</li>
<!-- -->
<li class="result-row">
<a href="#">
<div class="result-image-act">
<img src="https://dummyimage.com/100x100/000/fff&text=1" class="active">
<img src="https://dummyimage.com/100x100/000/fff&text=2">
<img src="https://dummyimage.com/100x100/000/fff&text=3">
<img src="https://dummyimage.com/100x100/000/fff&text=4">
</div>
<div class="swipe-wrap">
<div class="swipe-wrap-lef">
<a href="#">
<div class="swipe-prev">
<p><</p>
</div>
</a>
</div>
<div class="swipe-wrap-rig">
<a href="#">
<div class="swipe-next">
<p>></p>
</div>
</a>
</div>
</div>
</a>
</li>
</ul>

Your problem is coming from how you find the active image. There are presumably multiples, but you want to find the one related to whatever was clicked. Change lines like this:
$('img.active')
to something like:
$(this).closest("ul.results").find("img.active")
to get the img.active within the clicked ul.

Replace alt text attribute of images getting text in paragraph

I'm trying to get text in paragraph ".name" and put into all alt attribute in an image gallery. How can i get this text and put into attribute changing the current text. For example: in .box-product one the image of product 0001 should get alt text from this paragraph Box 0001 and another blocks the same respectly.
$(document).ready(function() {
for (i = 0; i < document.getElementsByClassName("box-product").length; i++) {
document.getElementsByClassName("name")[i].setAttribute(
"alt", document.getElementsByTagName("img")[i].src);
}
});
.box-product {
display: inline-block;
border: 1px gray solid;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Product Gallery -->
<div class="gallery-products">
<!-- Product 0001 -->
<div class="box-product">
<a id="product" href="#" class="details">
<p class="image">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/3_D-Box.jpg" height="100" alt="Replace this alt" id="" />
</p>
</a>
<p class="name">Box 0002</p>
</div>
<!-- Product 0002 -->
<div class="box-product">
<a id="product" href="#" class="details">
<p class="image">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/3_D-Box.jpg" height="100" alt="Replace this alt" id="" />
</p>
</a>
<p class="name">Box 0002</p>
</div>
<!-- Product 0003 -->
<div class="box-product">
<a id="product" href="#" class="details">
<p class="image">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/3_D-Box.jpg" height="100" alt="Replace this alt" id="" />
</p>
</a>
<p class="name">Box 0003</p>
</div>
</div>

Perhaps you meant this?
I use jQuery for all the access - you had typos in your DOM access
$(function() {
$(".box-product").each(function() {
$(this).find("img").attr("alt",$(this).find("p.name").text());
});
});
.box-product {
display: inline-block;
border: 1px gray solid;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Product Gallery -->
<div class="gallery-products">
<!-- Product 0001 -->
<div class="box-product">
<a id="product" href="#" class="details">
<p class="image">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/3_D-Box.jpg" height="100" alt="Replace this alt" id="" />
</p>
</a>
<p class="name">Box 0002</p>
</div>
<!-- Product 0002 -->
<div class="box-product">
<a id="product" href="#" class="details">
<p class="image">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/3_D-Box.jpg" height="100" alt="Replace this alt" id="" />
</p>
</a>
<p class="name">Box 0002</p>
</div>
<!-- Product 0003 -->
<div class="box-product">
<a id="product" href="#" class="details">
<p class="image">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/3_D-Box.jpg" height="100" alt="Replace this alt" id="" />
</p>
</a>
<p class="name">Box 0003</p>
</div>
</div>

With jQuery,
$('.box-product').each(function() {
$(this).children('img').attr('alt', $(this).children('.name').text());
});
Basically, $('.box-product') gets all of the boxes. Then you need to loop through each, getting the text from it's child .name and assigning it to the alt attribute of it's child img.
Without jQuery, you can use the querySelectorAll and querySelector functions to easily the same.
document.querySelectorAll('.box-product').forEach(function() {
this.querySelector('img').alt = this.querySelector('.name').innerText;
});
And without those functions (for older browsers):
var products = document.getElementsByClassName('box-product');
for(i in products) {
var product = products[i];
product.getElementsByTagName('img')[0].setAttribute('alt', product.getElementsByClassName('name')[0].innerText);
}

Creating a scrolling page without a plug-in. No scroll effect

I'm trying to create a one page scrolling site without using a plugin. Following this tutorial https://www.abeautifulsite.net/smoothly-scroll-to-an-element-without-a-jquery-plugin-2
The links work but there is no scrolling effect, it just jumps to the section.
JS
$('a[href^="#"]').on('click', function(event) {
var target = $(this.getAttribute('href'));
if( target.length ) {
event.preventDefault();
$('html, body').stop().animate({
scrollTop: target.offset().top
}, 1000);
}
});
HTML (updated to remove errors)
<div id="container">
<div class="banner">
<a class="button" href="#welcome"><h2 style="text-align: center;"></h2></a>
</div>
<div id="page1">
<a id="welcome"></a>
<h1></h1>
<div id="welcome_squares">
<div class="quarter-column">
<h3></h3>
<p></p>
</div>
<div class="quarter-column">
<a href="#info">
<div class="welcome_square">
<img src="/pageassets/" alt="" />
</div>
</a>
</div>
<div class="quarter-column">
<a href="#events">
<div class="welcome_square">
<img src="/pageassets/" alt="" />
</div>
</a>
</div>
<div class="quarter-column">
<a href="#contact">
<div class="welcome_square">
<img src="/pageassets/" alt="" />
</div>
</a>
</div>
</div>
</div>
<div class="full-column" id="tiles">
<a id="info"></a>
//CONTENT
</div>
<div class="full-column" id="tiles">
<a id="events"></a>
//CONTENT
</div>
<div id="contact">
<a id="contact"></a>
</div>
</div>

Hey here's the Fiddle which is working.
https://jsfiddle.net/fj1dfcsr/2/
Errors I've encountered.
<div id="container">
<div class="banner">
<a class="button" href="#welcome"><h2 style="text-align: center;"></h2></a>
</div>
<div id="page1">
<a id="welcome" href="#"></a>
<h1></h1>
<div id="welcome_squares">
<div class="quarter-column">
<h3></h3>
<p></p>
</div>
<div class="quarter-column">
<a href="#info">
<div class="welcome_square">
<img src="/pageassets/" alt="" />
</div>
</a>
</div>
<div class="quarter-column">
<a href="#events">
<div class="welcome_square">
<img src="/pageassets/" alt="" />
</div>
</a>
</div>
<div class="quarter-column">
<a href="#contact">
<div class="welcome_square">
<img src="/pageassets/" alt="" />
</div>
</a>
</div>
</div>
</div>
<div class="full-column" id="tiles">
<a id="info" href="#">INfo</a> //Here, you have used </div> instead of </a>
</div>
<div class="full-column" id="tiles">
<a id="events" href="#"></a> //Here also, you have used </div> instead of </a>
</div>
<div id="contact">
</div>
</div>
Few things you should keep in mind that you are calling a particular div whose id you know.
For example
<div id="home"></div>
then you'll have to use Home
not <a id="#home"> Home </a> //Wrong way

There are a lot of mistakes in the code you presented,so it's hard to tell what your original problem was. Here's a working fiddle based on your example.
https://jsfiddle.net/1dqhqpet/1/
I used the id attribute on anchors you place in the document to identify the location of a field you want to "go to". I also didn't put the content inside the anchor tags, because that is not how you do that normally. The anchor tag is a marker. But I don't see why that would be too much of a problem (although with the href on the anchor tag that would turn the whole text into a link). As you can see, since I didn't have access to your images I put some filler content in so you can see it scroll, but again, that shouldn't really affect anything.
It's likely your problem is not in the code you presented.
Some further notes on your code:
I know it was copy pasted, but you have an extra </div> after each //Content comment which makes it not working HTML
Your anchors that are used to identify the location of portions of the document don't need href attributes either. All they need is id. So
<a id="welcome" href="#"></a>
in your example becomes
<a id="welcome"></a>
Note that the content shouldn't go in the anchor tag either. It should go under it. The anchor is just like a bookmark to identify a portion of the page.
Based on how this works, the JQuery is only there to provide "smooth" scrolling. It works just fine without it.

Search Items using jquery

I'm trying to create a search using jQuery
$(function() {
var opts = $('#content li').map(function() {
return [[this.value, $(this).text()]];
});
$('#someinput').keyup(function(){
var rxp = new RegExp($('#someinput').val(), 'i');
var content = $('#content').empty();
opts.each(function() {
if (rxp.test(this[1])) {
content.append($('</li>').attr('value', this[0]).text(this[1]));
}
});
});
});
<input type="text" id="someinput" placeholder="Search" name="search" >
<section id="content">
<ul id="newSonglist">
<!-- items here -->
</ul>
</section>
Items look like this:
<li onclick="myControl.selectList(this,1)">
<a class="frmPlay" href="">
<img class="frmPlay" src="images/Right.png" alt="">
</a>
<span style="display:none;" class="musicData" pic="" title="Chris" brown="" grass="" aint="" greener="" value=""></span>
<div class="r">
<img class="picStyle" src="">
</div>
<div class="textBox">
Chris Brown Grass Aint Greener
<p>Sent by Nikan</p>
</div>
</li>
When I search Chris Brown it will remove all of the contents and it does not exclude the Chris Brown. Can you guys help me make it work? Thanks.

Your code works fine except for your new li creation. You are creating the li element using $('</li>') instead of $('<li>') (Note the /)
// You wrote </li> instead of <li>
content.append($('<li>').attr('value', this[0]).text(this[1]));
See this fiddle

I'm not very sure if I got what you trying to do, however for a simple JavaScript search UI, I'd rather do something more in the following fashion:
$(function() {
$("#someinput").on("keyup", function() {
var search_string = $(this).val()
var criteria = new RegExp(search_string, "i");
$("#content li").each(function() {
var li_element = $(this);
var filtered_out = li_element.text().match(criteria) == null && search_string.length > 0
if (filtered_out) {
li_element.hide();
} else {
li_element.show();
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="someinput" placeholder="Search" name="search">
<section id="content">
<ul id="newSonglist">
<!-- items here -->
</ul>
<li>
<a class="frmPlay" href="">
<img class="frmPlay" src="images/Right.png" alt="">
</a>
<span style="display:none;" class="musicData" pic="" title="Chris" brown="" grass="" aint="" greener="" value=""></span>
<div class="r">
<img class="picStyle" src="">
</div>
<div class="textBox">
Chris Brown Grass Aint Greener
<p>Sent by Nikan</p>
</div>
</li>
<li>
<a class="frmPlay" href="">
<img class="frmPlay" src="images/Right.png" alt="">
</a>
<span style="display:none;" class="musicData" pic="" title="Chris" brown="" grass="" aint="" greener="" value=""></span>
<div class="r">
<img class="picStyle" src="">
</div>
<div class="textBox">
Jack Johnson
<p>Sent by Nikan</p>
</div>
</li>
<li>
<a class="frmPlay" href="">
<img class="frmPlay" src="images/Right.png" alt="">
</a>
<span style="display:none;" class="musicData" pic="" title="Chris" brown="" grass="" aint="" greener="" value=""></span>
<div class="r">
<img class="picStyle" src="">
</div>
<div class="textBox">
Aguillera
<p>Sent by Nikan</p>
</div>
</li>
</section>