We Keep Coding

Giving Multiple Buttons an EventListener

I'm making a website that includes carousels and buttons. When you click the buttons it moves the carousel to the left or right to see more or previous content. I made it at first by creating two functions, one for the button that goes back and one for the button that goes forward. It worked, but I realized that I needed to make it for All of the buttons since I had multiple carousels.
var nextButton = document.querySelectorAll('.button-forward');
var backButton = document.querySelectorAll('.button-back');
nextButton.addEventListener('click', function() {
itemContainer.style.transform = 'translateX(-40%)';
});
backButton.addEventListener('click', function() {
itemContainer.style.transform = 'translateX(10%)';
});
I tried storing all the forward and backward buttons with document.querySelectorAll and gave them a forEach method where in it is the event listener for them. The other two carousel buttons still weren't working, I also tried making them an array to see if it would help, but it didn't change anything. In summary I want to make it where I can give the event listener to all of the pairs of buttons instead of just one. Could you guys help me? If you need a better description please tell me!
var nextButton = document.querySelectorAll('.button-forward');
var backButton = document.querySelectorAll('.button-back');
nextButton.forEach(button => {
button.addEventListener('click', nextButton => {
itemContainer.style.transform = 'translateX(-40%)';
})
})
backButton.forEach(button => {
button.addEventListener('click', backButton => {
itemContainer.style.transform = 'translateX(10%)';
})
})
Here's my HTML structure of the carousel for those who want to know:
I used the main element keep the parts of my carousel together, inside it is the visible_items div that only shows the items that are in it with overflow: scroll in CSS. Inside of that os the item_container which just contains the items. The ion-icons or buttons are at the top and bottom of the main element, and when you click them they make the item_container translate left or right making the items shown in the visible_items div change.
<ion-icon name="chevron-back-outline" class="button-back"></ion-icon>
<main>
<h1>Poular Shoes</h1>
<div class="visible_items">
<div class="item_container">
<div class="items">
</div>
<div class="items">
</div>
<div class="items">
</div>
<div class="items">
</div>
<div class="items">
</div>
<div class="items">
</div>
<div class="items">
</div>
<div class="items">
</div>
</div>
</div>
<ion-icon name="chevron-forward-outline" class="button-forward"></ion-icon>
</main>

The procedure is correct, however I am afraid you are applying the transformation always to the same "itemContainer" element. This should in fact point to the element related to the button pair you assign during that iteration.
We then need to fetch all the carousels via querySelectorAll; each will have element containers and their buttons as children. In this case you have a guaranteed order and only one array to scroll through.
Example:
document.body.querySelectorAll(".carousels").forEach((c) => {
const container = c.querySelector(".container")
c.querySelector(".next")
.addEventListener("click",
() => container.style...)
c.querySelector(".back")
.addEventListener("click",
() => container.style...)
})
I would recommend that you modify your html code as follows:
<!-- Move this inside the carousel div -->
<ion-icon name="chevron-back-outline" class="button-back"></ion-icon>
<!-- This is not a good tag to create many carousel divs -->
<!-- I will use something like <div class="carousel"> -->
<main>
<h1>Poular Shoes</h1>
<div class="visible_items">
<div class="item_container">
<div class="items">
</div>
<div class="items">
</div>
<div class="items">
</div>
<div class="items">
</div>
<div class="items">
</div>
<div class="items">
</div>
<div class="items">
</div>
<div class="items">
</div>
</div>
</div>
<ion-icon name="chevron-forward-outline" class="button-forward"></ion-icon>
</main>
I'll leave you a snippet to start with:
// get all carousels in the page
const carousels = document.body.querySelectorAll(".carousel");
// scan each carousel and assign events to children
carousels.forEach((carousel) => {
// get item_container
const itemContainer = carousel.querySelector(".item_container");
// assign event to button-back
carousel.querySelector(".button-back").addEventListener('click', () => {
itemContainer.style.transform = 'translateX(-40%)';
});
// assign event to button-forward
carousel.querySelector(".button-forward").addEventListener('click', () => {
itemContainer.style.transform = 'translateX(10%)';
});
});
<!-- Changed -->
<div class="carousel">
<!-- Moved -->
<ion-icon name="chevron-back-outline" class="button-back"></ion-icon>
<h1>Poular Shoes</h1>
<div class="visible_items">
<div class="item_container">
<div class="items">
</div>
<div class="items">
</div>
<div class="items">
</div>
<div class="items">
</div>
<div class="items">
</div>
<div class="items">
</div>
<div class="items">
</div>
<div class="items">
</div>
</div>
</div>
<ion-icon name="chevron-forward-outline" class="button-forward"></ion-icon>
<!-- Changed -->
</div>

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>

Javascript foreach array key values, output to html

How do I loop thru array keys to output their values to HTML?
The layout I'm working with is a thumbnail grid, 3 columns by 2 rows. Each thumbnail has a caption below it. Selecting any of the thumbnails opens up a hidden container which is also a grid of 3 columns and 2 rows. Within that hidden container many of the images and captions are going to be identical so rather than have a whole bunch of duplicate HTML I figured I could just store each in an array and reference the values that each is associated with. I'm just stuck on how to create the loop at the moment.
var img=[
'image01.jpg','image02.jpg','image03.jpg','image04.jpg'
]
var details=[
'aaaaaa','bbbbbb','cccccc','dddddd'
];
$( "#yin" ).click(function() {
var img = [0,2];
var details = [0,1];
$(step).each(function() {
document.getElementById("img").innerHTML();
});
$(imgs).each(function() {
document.getElementById("img").innerHTML();
});
});
<div class="container">
<ul class="row-fluid">
<li class="span4" id="yin">
<div class="row-fluid">
<img src="yin.jpg" />
<h3>Yin</h3>
</div>
</li>
<li class="span4" id="yang">
<div class="row-fluid">
<img src="yang.jpg" />
<h3>Yang</h3>
</div>
</li>
</ul>
<div class="row-fluid">
<div class="span12">
<div class="show-details details">
<div class="detail-content">
<div id="img">
<!-- Loop (for yin would be image01, and image03) -->
</div>
<div id="details">
<!-- Loop (for yin would be 'aaaaaa','bbbbbb') -->
</div>
</div>
</div>
</div>
</div>
</div>

There's an issue with that code before you get into looping, the img and details variables are being re-declared inside your click function. What are they intended to be? From the comments in your code they seem to be specifying which indices of the array to use.
var images = ['image01.jpg','image02.jpg','image03.jpg','image04.jpg'];
var details = ['aaaaaa','bbbbbb','cccccc','dddddd'];
$( "#yin" ).click(function() {
var imgIndices = [0,2];
var detailIndices = [0,1];
$("#img").html("");
$("#details").html("");
$(imgIndices).each(function(i, o) {
$("#img").append("<img src=\"" + images[o] + "\"/>");
});
$(detailIndices).each(function(i, o) {
$("#details").append("<p>" + details[o] + "</p>");
});
});
<div class="container">
<ul class="row-fluid">
<li class="span4" id="yin">
<div class="row-fluid">
<img src="yin.jpg" />
<h3>Yin</h3>
</div>
</li>
<li class="span4" id="yang">
<div class="row-fluid">
<img src="yang.jpg" />
<h3>Yang</h3>
</div>
</li>
</ul>
<div class="row-fluid">
<div class="span12">
<div class="show-details details">
<div class="detail-content">
<div id="img">
<!-- Loop (for yin would be image01, and image03) -->
</div>
<div id="details">
<!-- Loop (for yin would be 'aaaaaa','bbbbbb') -->
</div>
</div>
</div>
</div>
</div>
</div>
I would take the click function out to a named function though and just pass in the arrays.

All questions must stay visible depending on the user's path

I have this quote form that is pretty extensive... All I need to do now is add some code that wi let the questions remain visible instead of hiding it after a selection is made.
i.e
User will be in either a Business path (all table1,11,12,13,14,15,16), a Resident's path (all table2,21,22,23,24,25,26, or a I have a list path (all table3).
Here is my fiddle http://jsfiddle.net/XuVUb/
snippet of code:
<script type="text/javascript">
function show_table(id){
document.getElementById('table1').style.display='none';
document.getElementById('table11').style.display='none';
document.getElementById('table12').style.display='none';
document.getElementById('table13').style.display='none';
document.getElementById('table14').style.display='none';
document.getElementById('table15').style.display='none';
document.getElementById('table16').style.display='none';
document.getElementById('table2').style.display='none';
document.getElementById('table21').style.display='none';
document.getElementById('table22').style.display='none';
document.getElementById('table23').style.display='none';
document.getElementById('table24').style.display='none';
document.getElementById('table25').style.display='none';
document.getElementById('table26').style.display='none';
document.getElementById('table3').style.display='none';
document.getElementById('table'+id).style.display='block';
}
</script>

I think you want something like this: http://jsfiddle.net/S9bSe/
HTML:
<div class="level-1">
<p>Are you dead or alive?</p>
<ul>
<li>Dead</li>
<li>Alive</li>
<li>Both</li>
</ul>
<div id="dead" class="hidden level-2">
<p>Do you have physical form?</p>
<ul>
<li>Yes</li>
<li>No</li>
</ul>
<div id="corpse" class="hidden level-3">
<p>You are a corpse</p>
</div>
<div id="ghost" class="hidden level-3">
<p>You are a ghost</p>
</div>
</div>
<div id="alive" class="hidden level-2">
<p>Do you have 9 lives?</p>
<ul>
<li>Yes</li>
<li>No</li>
</ul>
<div id="regular_cat" class="hidden level-3">
<p>You are a cat</p>
</div>
<div id="maybe_human" class="hidden level-3">
<p>You might be human</p>
</div>
</div>
<div id="schrodingers_cat" class="hidden level-2">
<p>You are a cat and you belong to Schrödinger</p>
</div>
</div>
CSS
.hidden {
display: none;
}
JavaScript (with jQuery)
$("a").on("click", function () {
var id = $(this).attr("href");
var level = $(this).data("level");
$(".level-" + level).addClass("hidden");
$(id).removeClass("hidden");
});
Please excuse me for introducing jQuery, but it should at least make it clear how one might solve the problem.

How to use jQuery-One-Page-Nav and jQuery.SerialScroll togheter for enable "prev" and "next" buttons or arrows?

I'm trying to have a one page solution with jQuery-One-Page-Nav for highlighting menu links when i reach some "sections" in the page (and click to scroll to respective sections).
Inside this sections i have some posts like the code
<body>
<nav>
<ul class="menuslides">
<li class="item-1">
<a href="#section-1" >One</a>
</li>
<li class="item-2">
<a href="#section-2" >Two</a>
</li>
...
</ul>
</nav>
<div id="wrapper">
<div id="wrap">
<section id="section-1">
<div class="post" id="item-slide-1">img</div>
<div class="post" id="item-slide-2">img</div>
</section>
<section id="section-2">
<div class="post" id="item-slide-3">img</div>
<div class="post" id="item-slide-4">img</div>
<div class="post" id="item-slide-5">img</div>
</section>
...
<section id="section-10">
<div class="post" id="item-slide-31">img</div>
...
</section>
</div>
<div id="buttons">
<div id="button" class="goto-prev">Prev</div>
<div id="button" class="goto-next">Next</div>
</div>
</div>
<script>
jQuery(document).ready(function() {
jQuery('.menuslides').onePageNav();
});
jQuery(function( $ ){
$('#wrapper').serialScroll({
target:'#wrap',
items:'.post',
prev:'div.goto-prev',
next:'div.goto-next',
axis:'y',
duration:700,
onBefore:function( e, elem, $pane, $items, pos ){
e.preventDefault();
if( this.blur )
this.blur();
},
onAfter:function( elem ){
}
});
});
</script>
</body>
I'm happy with the jQuery-One-Page-Nav, it works very well and i can navigate through "sections" with the nav menu.
But i need to add two button or two arrows that they work like a prev-next link scrolling the page through my posts class="post"
I'm using
https://github.com/davist11/jQuery-One-Page-Nav
and
https://github.com/flesler/jquery.serialScroll
with no weird changes to the code (only renamed ids and classes) but I can not get them coexist together: it works only one of them!
Is there any solution to make them co-exist, or is there a snippet of code that will enable me to have these two functions at the same time?