Rearrange children orger in Javascript doesn't work multiple times - javascript

I've got the following code to move the childs order in an element. When I click once, it works fine, but when I click multiple times, it only works every 2nd or 3rd time.
const prevP = () => {
const pList = document.getElementById("project-list")
const firstProject = pList.firstChild;
const lastProject = pList.lastChild;
pList.insertBefore(lastProject, firstProject);
}
const nextP = () => {
console.log("next");
const pList = document.getElementById("project-list")
const firstProject = pList.firstChild;
let lastProject = pList.lastChild;
pList.insertBefore(firstProject, lastProject);
}
<span class="material-icons md-48 close icon-btn" onclick="prevP()"
>navigate_before</span
>
<div class="project-list" id="project-list">
<div class="project">
<img href="protfolio" alt="" />
<p>My Portfolio 1</p>
</div>
<div class="project">
<img href="protfolio" alt="" />
<p>My Portfolio 2</p>
</div>
<div class="project">
<img href="protfolio" alt="" />
<p>My Portfolio 3</p>
</div>
<div class="project">
<img href="protfolio" alt="" />
<p>My Portfolio 4</p>
</div>
<div class="project">
<img href="protfolio" alt="" />
<p>My Portfolio 5</p>
</div>
</div>
<span class="material-icons md-48 close icon-btn" onclick="nextP()"
>navigate_next</span
>
I also realised that sometimes the code messes up the order of the elements when using both buttons, and I have no idea why this is happening

The cause of that behaviour is that you use firstChild and lastChild. These may select text nodes with just some white space. Change these to firstElementChild and lastElementChild.
Secondly, the "Next" action should not insert the first element before the last element, but after it. For that you can use the method appendChild:
pList.appendChild(firstProject);

Related

Javascript - Inserting Image Text and description in a container

<div id="CollectionALL">
<div id="collection1" class="col">
<img id="Img1" class="imageCS"/>
<H1 id="Title1"></H1>
<p id="Text1"></p>
</div>
<div id="collection2" class="col">
<img id="Img2" class="imageCS"/>
<H1 id="Title2"></H1>
<p id="Text2"></p>
</div>
</div>
Hi all,
I'm just starting out on javascript and would like to check how i should go about replacing or inserting an image into each of the Img1, Img2 and Img3 tags.
I believe once i'm able to figure out the image, the title and texts should be in the same method?
function displayResult()
{
var collect1=document.getElementById("img1").rows[0];
var x=collect1.insertCell(-1);
x.innerHTML="<img src='img/abc.png' alt='collection1'/>";
}
You need to specify the selectors for h1, p, img inner your container. then you can use setAttribute and innerHTML function to set content.
Then you can wrapped inside a loop and iterate the result array. The example below will shows you how it works inside the loop.
like that
function displayResult()
{
var collect = document.getElementById("collection1");
let img = collect.querySelector('img');
let h1 = collect.querySelector('h1');
let p = collect.querySelector('p');
img.setAttribute('src', "https://via.placeholder.com/100");
h1.innerHTML = "collection1";
p.innerHTML = "some text"
}
displayResult()
<div id="CollectionALL">
<div id="collection1" class="col">
<img id="Img1" class="imageCS"/>
<H1 id="Title1"></H1>
<p id="Text1"></p>
</div>
<div id="collection2" class="col">
<img id="Img2" class="imageCS"/>
<H1 id="Title2"></H1>
<p id="Text2"></p>
</div>
</div>
I'm unsure if I understood your question correctly, but if I did I see no use for JS to be used in here. Simply insert your src, title and text through the HTML.
<div id="CollectionALL">
<div id="collection1" class="col">
<img id="Img1" class="imageCS" src="img/abc.png">
<h1 id="Title1">My Title</h1>
<p id="Text1">My Text</p>
</div>
<div id="collection2" class="col">
<img id="Img2" class="imageCS" src="img/abc.png>
<h1 id="Title2">My Title</h1>
<p id="Text2">My Text</p>
</div>
</div>
note that "img" is not a tag with a closing, thus ending it with a />:
<img id="Img2" class="imageCS"/>
is not quite right. Also, tags in HTML are case-sensitive, and so "H1" is not a valid tag, but "h1" is.
var ImgA= document.getElementById("Img1");
Img1.src = "abc.jpg";
var TitleA= document.getElementById("Title1");
TitleA.textContent = "Some Title Header Thing";
var TextA= document.getElementById("Text1");
TextA.textContent = "qwerty some text";
I think i'll be doing it this way.
Seems to work
Thanks to everyone

Cannot read property 'insertAdjacentHTML' of null

When I try rendering a new job to the DOM, the above error is displayed. The template literals select data from the getJob() function in my Job.js file. The id selection works when I click on a specific job from a query search. The below elements won't display in the DOM when I do that same click though. Why is my selected element null?
JS code:
export const renderJob = job => {
const markup = `
<figure class="job__fig">
<h1 class="job_role">${job.title}</h1>
<h1 class="company_name">${job.company}</h1>
<h3 class="job_location">${job.location}</h3>
<img src="${job.logo}" alt="${job.title}" class="job_img">
<p class="job_description">${job.description}</p>
<p class="job_URL">${job.redirectURL}</p>
<p class="job_createdAt">${job.createdAt}</p>
</figure>
`;
elements.job.insertAdjacentHTML('afterbegin', markup);
};
HTML markup:
<div class="job">
<!--
<figure class="job__fig">
<h1 class="job_role">Frontend Engineer</h1>
<h1 class="company_name">Amazon</h1>
<h3 class="job_location">Remote</h3>
<img src="${job.logo}" alt="${job.title}" class="job_img">
<p class="job_description">Amazon is looking...</p>
<p class="job_URL">https://www.linkedin.com/jobs/view/frontend-engineer-studios-applications-at-amazon-1987071787/?utm_campaign=google_jobs_apply&utm_source=google_jobs_apply&utm_medium=organic</p>
<p class="job_createdAt">09/26/2020</p>
</figure>
-->
</div>

When you reach the last div in a slideshow, how do you jump back to the first div?

I want to have a simple slideshow on click, but when i reach the last div of the slideshow and click further everything goes hidden. How do i make sure it jumps back to the first div?
This is how my jquery looks like:
function click() {
$('#next').on('click', function () {
var $current = $('.work.active');
$('.work').removeClass('active')
$current.next().addClass('active')
})
}
So the div elements all have the same class .work.
Only 1 of them is 'active'
Here is the HTML where u can see i gave every div the same class, only one is active:
<section>
<div class="work active">
<section id="workTxt">
<h1>Dynamic Infographic</h1>
<p>This is a dynamic infographic that i made for a school assignment. The infographic contains of some
data
about 5 different airports. U can compare the total amount of passengers, total flights and the
amount
of cargo an airport had to handle. </p>
</section>
<section id="workImg">
<a href="http://st392522.cmd19a.cmi.hanze.nl/pae5/">
<div><img class="workIMG" src="img/infographic.png" alt="infographic"></div>
</a>
<div><img src="img/infoCol.png" alt="infographicColors"></div>
</section>
</div>
<div class="work">
<section id="workTxt2">
<h1>My very first website!</h1>
<p>This is my very first website i made. U can learn even more about me here, it contains of some
general
information about me.</p>
</section>
<section id="workImg2">
<a href="http://st392522.cmd19a.cmi.hanze.nl/pae1/">
<div><img class="workIMG" src="img/eerste.png" alt="First Website"></div>
</a>
<div><img src="img/eersteCol.png" alt="FirstColors"></div>
</section>
</div>
<div class="work">
<section id="workTxt3">
<h1>Delivery site for a client</h1>
<p>This is a delivery website i made for a friend. It's just fictional but it works :).</p>
</section>
<section id="workImg3">
<a href="http://st392522.cmd19a.cmi.hanze.nl/pae2/">
<div><img class="workIMG" src="img/delivers.png" alt="Delivery Website"></div>
</a>
<div><img src="img/deliverCol.png" alt="deliveryColors"></div>
</section>
</div>
<div class="work">
<section id="workTxt4">
<h1>Redesign</h1>
<p>This is a design I made in Adobe XD. I made some changes to <a
href="http://www.massageontspanningdeventer.nl/index.php"
style="text-decoration: none; color:#F5FF63; font-weight: 400;">this</a>
site. I wanted to improve it looking at the design and complexion. </p>
</section>
<section id="workImg4">
<a href="https://xd.adobe.com/view/9d326937-d1b0-4997-4fee-27b2965afde1-eb03/?fullscreen">
<div><img class="workIMG" src="img/redesign.png" alt="Redesign"></div>
</a>
<div><img src="img/redesignCol.png" alt="redesignColors"></div>
</section>
</div>
</section>
<div><img src="img/next.png" alt="NEXT" id="next"></div>
Just add a check to see if it's null or not before changing it.
function click() {
$('#next').on('click', function () {
var $current = $('.work.active');
$('.work').removeClass('active')
if ($current.next() !== null) {
$current.next().addClass('active')
} else {
$current.parent().first().addClass('active')
}
})
}

Get element text through GTM Custom JavaScript Variable

I have two groups of links all with the same class names, the only difference is the text in the .
I need to get the text for the clicked link and pass it to GA through GTM.
<div class="item-set">
<header>Section Title One</header>
<section class="products">
<div class="list">
<img src="/ProductImages1.jpg">
</div>
<div class="list">
<img src="/ProductImages2.jpg">
</div>
<div class="list">
<img src="/ProductImages3.jpg">
</div>
</section>
</div>
<div class="item-set">
<header>Section Title Two</header>
<section class="products">
<div class="list">
<img src="/ProductImages1.jpg">
</div>
<div class="list">
<img src="/ProductImages2.jpg">
</div>
<div class="list">
<img src="/ProductImages3.jpg">
</div>
</section>
</div>
I have created a custom javascript variable
function() {
$('section.products div.list').click(function() {
return $(this).closest('.item-set').find('header').text();
});
}
But the bleep thing isn't working as I expect (or at all). It returns "undefined".
Any assistance is greatly appreciated.
You shouldn't bind to click event in JS variable. You should use JS variables in GTM only for receiving values
The correct way to achieve your goal is:
1) Enable built-in variable Click Element (if you already have it, you can skip this step)
2) Create trigger, which will fire when you clicking on your links
CSS selector on the screenshot is .item-set .list a
3) Create JS variable
Code is: function() {
return $({{Click Element}}.closest('.item-set')).find('header').text();
}
3) Create a tag, which will send data to GA
Here you can use your variable form step 3 {{Click List Header}}
Maybe you are not capturing/storing the return $(this).closest('.item-set').find('header').text(); from the function?
When you for example immediately invoke your function and click a div, the text of the <header> will be logged to the console.
(function() {
$('section.products div.list').click(function(e) {
e.preventDefault(); // to prevent the default action of the click
console.log($(this).closest('.item-set').find('header').text());
return $(this).closest('.item-set').find('header').text();
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item-set">
<header>Section Title One</header>
<section class="products">
<div class="list">
<img src="/ProductImages1.jpg">
</div>
<div class="list">
<img src="/ProductImages2.jpg">
</div>
<div class="list">
<img src="/ProductImages3.jpg">
</div>
</section>
</div>
<div class="item-set">
<header>Section Title Two</header>
<section class="products">
<div class="list">
<img src="/ProductImages1.jpg">
</div>
<div class="list">
<img src="/ProductImages2.jpg">
</div>
<div class="list">
<img src="/ProductImages3.jpg">
</div>
</section>
</div>

Function called on click is affecting all elements with same class

I have a page displaying a few images with a play button. When the play button is clicked, I'm trying to swap out a sibling element's src with the path to the corresponding gif. For some reason, when I click the play button on the first element, it works fine. When I click play on the second element, it swaps out the src on the second gif, BUT also restarts the first gif. If I click play on the third play button, it restarts all 3 gifs from the beginning.
HTML looks like so:
<div class="player">
<div class="player--image">
<img class="gif--control gif--play" src="/img/play-button.png" />
<img class="player--gif" src="/assets/player-image.png" data-gif="/assets/player-gif.gif"/>
</div>
<div class="player--info">
<div class="player--name">
<h3 class="title">#23</h3>
<h3 class="title title__large">Player Name</h3>
<h3 class="title">Center</h3>
</div>
<div class="excerpt">
Lorem ipsum
</div>
</div>
</div>
<div class="player">
<div class="player--image">
<img class="gif--control gif--play" src="/img/play-button.png" />
<img class="player--gif" src="/assets/player-2-image.png" data-gif="/assets/player-2-gif.gif"/>
</div>
<div class="player--info">
<div class="player--name">
<h3 class="title">#45</h3>
<h3 class="title title__large">Player Name</h3>
<h3 class="title">Center</h3>
</div>
<div class="excerpt">
Lorem ipsum
</div>
</div>
</div>
Javascript/jQuery is as follows:
$(document).on('click tap', '.gif--control', function(){
var $this = $(this);
var $gif = $this.siblings('.player--gif');
var src = $gif.attr('data-gif');
$gif.attr('src', src);
});
I've tried adding unique IDs to the img element that is having the src swapped, but still, all the gifs would restart when a new play button was clicked. Any help would be appreciated -- feel like I'm missing something super simple.
You're using an unreferenced $sibling call; I replaced it with $gif and your code seems to run fine.
$(document).on('click tap', '.gif--control', function(){
var $this = $(this);
var $gif = $this.siblings('.player--gif');
var src = $gif.attr('data-gif');
$gif.attr('src', src);
});
https://jsfiddle.net/7jktzLw5/
Here you go with one more solution https://jsfiddle.net/7jktzLw5/2/
$(document).on('click tap', 'img.gif--control', function(){
var $this = $(this);
var $gif = $this.next('img.player--gif');
$gif.attr('src', $gif.attr('data-gif'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="player">
<div class="player--image">
<img class="gif--control gif--play" src="https://image.flaticon.com/icons/png/128/70/70776.png" />
<img class="player--gif" src="https://image.flaticon.com/icons/png/128/42/42829.png" data-gif="https://image.flaticon.com/icons/png/128/44/44382.png"/>
</div>
<div class="player--info">
<div class="player--name">
<h3 class="title">#23</h3>
<h3 class="title title__large">Player Name</h3>
<h3 class="title">Center</h3>
</div>
<div class="excerpt">
Lorem ipsum
</div>
</div>
</div>
<div class="player">
<div class="player--image">
<img class="gif--control gif--play" src="https://image.flaticon.com/icons/png/128/70/70776.png" />
<img class="player--gif" src="https://image.flaticon.com/icons/png/128/136/136369.png" data-gif="https://image.flaticon.com/icons/png/128/236/236540.png"/>
</div>
<div class="player--info">
<div class="player--name">
<h3 class="title">#45</h3>
<h3 class="title title__large">Player Name</h3>
<h3 class="title">Center</h3>
</div>
<div class="excerpt">
Lorem ipsum
</div>
</div>
</div>
I've used next instead of siblings.
Hope this will help you.

Categories