Have an element react to another element change of state

Have an element react to another element change of state - javascript

I have two divs, wrapping 8 divs each:
<div class="binaries">
<div class="binary-number"> 0 </div>
<div class="binary-number"> 0 </div>
<div class="binary-number"> 0 </div>
<div class="binary-number"> 0 </div>
<div class="binary-number"> 0 </div>
<div class="binary-number"> 0 </div>
<div class="binary-number"> 0 </div>
<div class="binary-number"> 0 </div>
</div>
<div class="numbers">
<div class="each-number" data-value="128"> 128 </div>
<div class="each-number" data-value="64"> 64 </div>
<div class="each-number" data-value="32"> 32 </div>
<div class="each-number" data-value="16"> 16 </div>
<div class="each-number" data-value="8"> 8 </div>
<div class="each-number" data-value="4"> 4 </div>
<div class="each-number" data-value="2"> 2</div>
<div class="each-number" data-value="1"> 1 </div>
</div>
What I want to achieve, is that clicking, for example, the first div in the numbers section, changes the first div in the binaries section, but I'm not sure how to link them without adding a click handler to every single div in the numbers section.
Codepen:
http://codepen.io/Hyde87/full/zNGXXw/
JS:
"use strict";
let count = 0;
const output = document.getElementById("output");
const gameResult = document.getElementById("gameResult");
const numbers = document.querySelector(".numbers");
const binaries = document.querySelectorAll(".binary-number");
const randomizer = document.querySelector(".randomizer");
/* Get the number value of every number on click using event delegation, then call the testValue function */
numbers.addEventListener("click", getValue);
function getValue(e){
if (e.target.className == "each-number") {
e.target.classList.add("light");
let thisValue = e.target.getAttribute('data-value');
count += parseInt(thisValue);
console.log(count);
testValue()
}}
/* The values are added to the count variable, which is tested against the random number */
function testValue(){
if (count > parseInt(output.textContent)) {
gameResult.textContent = "Wrong value, you went over it."
count = 0;
output.textContent = "";
} else if (count === parseInt(output.textContent)) {
gameResult.textContent = "You got it right!";
output.textContent = "";
}
}
/* Gets a random number between 1 and 128 */
function getRandom() {
return Math.floor(Math.random() * (128 - 1 + 1)) + 1;
}
/* Displays the random number and resets other values so we always start from scratch when we get a new random number */
randomizer.addEventListener("click", function() {
gameResult.textContent = "";
count = 0;
output.textContent = getRandom();
for (let i = 0; i < binaries.length; i++) {
binaries[i].textContent = "0";
}
})

Add classes to binaries as
<div class="binaries">
<div class="binary-number num-128"> 0 </div>
<div class="binary-number num-64"> 0 </div>
<div class="binary-number num-32"> 0 </div>
<div class="binary-number num-16"> 0 </div>
<div class="binary-number num-8"> 0 </div>
<div class="binary-number num-4"> 0 </div>
<div class="binary-number num-2"> 0 </div>
<div class="binary-number num-1"> 0 </div>
</div>
And add these two line in getValue function
let binaryElem = document.querySelector(".binary-number.num-"+thisValue);
binaryElem.textContent = "1";

You don't have to add a click handler to every element inside numbers. Just add it to the parent element and get the index of the clicked event target.
Here is an example.
var bin = document.getElementsByClassName('binaries')[0];
var num = document.getElementsByClassName('numbers')[0];
function numClick(evt) {
var index = 0;
for(var i = num.children.length - 1; i >= 0; i--) {
if (evt.target == num.children[i]) {
index = i;
}
}
bin.children[index].classList.add('mark');
}
num.addEventListener('click', numClick)
.mark {
color: white;
background: red;
}
.binaries , .numbers {
display: flex;
justify-content: space-between;
}
<div class="binaries">
<div class="binary-number"> 0 </div>
<div class="binary-number"> 0 </div>
<div class="binary-number"> 0 </div>
<div class="binary-number"> 0 </div>
<div class="binary-number"> 0 </div>
<div class="binary-number"> 0 </div>
<div class="binary-number"> 0 </div>
<div class="binary-number"> 0 </div>
</div>
<div class="numbers">
<div class="each-number" data-value="128"> 128 </div>
<div class="each-number" data-value="64"> 64 </div>
<div class="each-number" data-value="32"> 32 </div>
<div class="each-number" data-value="16"> 16 </div>
<div class="each-number" data-value="8"> 8 </div>
<div class="each-number" data-value="4"> 4 </div>
<div class="each-number" data-value="2"> 2</div>
<div class="each-number" data-value="1"> 1 </div>
</div>

Related

Re-increment class on children divs when parent div class changes

I need to re-increment the class ("summary-item-${_}") on every 4, 3, or 2 children ("forEach" and "parseInt") depending on the class change of the parent div ".sqs-gallery-design-carousel-slides-in-view-4", ".sqs-gallery-design-carousel-slides-in-view-3", ".sqs-gallery-design-carousel-slides-in-view-2".
The initial page load adds the class to each child depending on the parent div class. But when adjusting the browser screen size the child classes do not toggle. As an example:
• .summary-item-list.sqs-gallery-design-carousel-slides-in-view-4 > .summary-item-1 on the first 4 children, .summary-item-2 on the second 4 children and so on.
• .summary-item-list.sqs-gallery-design-carousel-slides-in-view-3 > .summary-item-1 on the first 3 children, .summary-item-2 on the second 3 children and so on.
• .summary-item-list.sqs-gallery-design-carousel-slides-in-view-2 > .summary-item-1 on the first 2 children, .summary-item-2 on the second 2 children and so on.
/*-- Not for editing ---*/
window.addEventListener("resize", function() {
var w = window.innerWidth;
var responsiveDiv = document.querySelectorAll('.summary-item-list');
responsiveDiv.forEach((element) => {
if(w < 479) {
element.classList.remove("sqs-gallery-design-carousel-slides-in-view-4");
element.classList.remove("sqs-gallery-design-carousel-slides-in-view-3");
element.classList.add("sqs-gallery-design-carousel-slides-in-view-2");
} else if(w > 479 && w < 767) {
element.classList.remove("sqs-gallery-design-carousel-slides-in-view-4");
element.classList.add("sqs-gallery-design-carousel-slides-in-view-3");
element.classList.remove("sqs-gallery-design-carousel-slides-in-view-2");
} else if(w > 767) {
element.classList.add("sqs-gallery-design-carousel-slides-in-view-4");
element.classList.remove("sqs-gallery-design-carousel-slides-in-view-3");
element.classList.remove("sqs-gallery-design-carousel-slides-in-view-2");
}
})
});
/*-- Not for editing ---*/
/*-- For editing ---*/
document.addEventListener("load", function() {
const carouselSlidesFour = document.querySelectorAll(".sqs-gallery-design-carousel-slides-in-view-4 .summary-item");
const carouselSlidesThree = document.querySelectorAll(".sqs-gallery-design-carousel-slides-in-view-3 .summary-item");
const carouselSlidesTwo = document.querySelectorAll(".sqs-gallery-design-carousel-slides-in-view-2 .summary-item");
carouselSlidesFour.forEach((element, x) => {
const a = parseInt(x / 4) + 1;
if ($(".four-row .summary-item-list").hasClass( "sqs-gallery-design-carousel-slides-in-view-4" )){
element.classList.add(`summary-item-${a}`);
} else if ($(".four-row .summary-item-list").hasClass( "sqs-gallery-design-carousel-slides-in-view-3" )){
element.classList.remove(`summary-item-${a}`);
} else if ($(".four-row .summary-item-list").hasClass( "sqs-gallery-design-carousel-slides-in-view-2" )){
element.classList.remove(`summary-item-${a}`);
}
});
carouselSlidesThree.forEach((element, y) => {
const b = parseInt(y / 3) + 1;
if ($(".three-row .summary-item-list").hasClass( "sqs-gallery-design-carousel-slides-in-view-3" )){
element.classList.add(`summary-item-${b}`);
} else if ($(".three-row .summary-item-list").hasClass( "sqs-gallery-design-carousel-slides-in-view-4" )){
element.classList.remove(`summary-item-${b}`);
} else if ($(".three-row .summary-item-list").hasClass( "sqs-gallery-design-carousel-slides-in-view-2" )){
element.classList.remove(`summary-item-${b}`);
}
});
carouselSlidesTwo.forEach((element, z) => {
const c = parseInt(z / 2) + 1;
if ($(".two-row .summary-item-list").hasClass( "sqs-gallery-design-carousel-slides-in-view-2" )){
element.classList.add(`summary-item-${c}`);
} else if ($(".two-row .summary-item-list").hasClass( "sqs-gallery-design-carousel-slides-in-view-4" )){
element.classList.remove(`summary-item-${c}`);
} else if ($(".two-row .summary-item-list").hasClass( "sqs-gallery-design-carousel-slides-in-view-3" )){
element.classList.remove(`summary-item-${c}`);
}
});
}(document));
/*-- For editing ---*/
.sqs-block-summary {
border: solid 2px #000000;
margin: 10px;
}
.sqs-block-content {
margin: 10px;
}
.summary-item {
display: inline-block;
white-space: nowrap;
vertical-align: top;
padding-left: 1%;
padding-right: 1%;
}
.sqs-gallery-design-carousel-slides-in-view-4 .summary-item {
width: 24%;
}
.sqs-gallery-design-carousel-slides-in-view-3 .summary-item {
width: 32%;
}
.sqs-gallery-design-carousel-slides-in-view-2 .summary-item {
width: 49%;
}
.sqs-block-summary * {
box-sizing: border-box;
}
.summary-item-list-container {
width: 100%;
overflow: hidden;
}
.summary-item-list {
list-style-type: none;
margin: 0;
padding: 0;
vertical-align: top;
}
.summary-item-1 {
color: red !important;
}
.summary-item-2 {
color: green !important;
}
.summary-item-3 {
color: blue !important;
}
.summary-item-4 {
color: orange !important;
}
.summary-item-5 {
color: grey !important;
}
.summary-item-6 {
color: purple !important;
}
.identity.sqs-gallery-design-carousel-slides-in-view-4 .view-4, .identity.sqs-gallery-design-carousel-slides-in-view-3 .view-3, .identity.sqs-gallery-design-carousel-slides-in-view-2 .view-2 {
display: block;
}
.identity.sqs-gallery-design-carousel-slides-in-view-4 :not(.view-4), .identity.sqs-gallery-design-carousel-slides-in-view-3 :not(.view-3), .identity.sqs-gallery-design-carousel-slides-in-view-2 :not(.view-2) {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="identity summary-item-list sqs-gallery-design-carousel-slides-in-view-4">
<div class="view-4">Current gallery slide count on screen size: 4</div>
<div class="view-3">Current gallery slide count on screen size: 3</div>
<div class="view-2">Current gallery slide count on screen size: 2</div>
</div>
<div class="sqs-block-summary four-row">Gallery 1
<div class="sqs-block-content">
<div class="summary-block-wrapper">
<div class="summary-item-list-container">
<div class="summary-item-list sqs-gallery-design-carousel-slides-in-view-4">
<div class="summary-item"> Item 1 </div>
<div class="summary-item"> Item 2 </div>
<div class="summary-item"> Item 3 </div>
<div class="summary-item"> Item 4 </div>
<div class="summary-item"> Item 5 </div>
<div class="summary-item"> Item 6 </div>
<div class="summary-item"> Item 7 </div>
<div class="summary-item"> Item 8 </div>
<div class="summary-item"> Item 9 </div>
<div class="summary-item"> Item 10 </div>
<div class="summary-item"> Item 11 </div>
</div>
</div>
</div>
</div>
</div>
<div class="sqs-block-summary three-row">Gallery 2
<div class="sqs-block-content">
<div class="summary-block-wrapper">
<div class="summary-item-list-container">
<div class="summary-item-list sqs-gallery-design-carousel-slides-in-view-3">
<div class="summary-item"> Item 1 </div>
<div class="summary-item"> Item 2 </div>
<div class="summary-item"> Item 3 </div>
<div class="summary-item"> Item 4 </div>
<div class="summary-item"> Item 5 </div>
<div class="summary-item"> Item 6 </div>
<div class="summary-item"> Item 7 </div>
<div class="summary-item"> Item 8 </div>
<div class="summary-item"> Item 9 </div>
<div class="summary-item"> Item 10 </div>
<div class="summary-item"> Item 11 </div>
</div>
</div>
</div>
</div>
</div>
<div class="sqs-block-summary two-row">Gallery 3
<div class="sqs-block-content">
<div class="summary-block-wrapper">
<div class="summary-item-list-container">
<div class="summary-item-list sqs-gallery-design-carousel-slides-in-view-2">
<div class="summary-item"> Item 1 </div>
<div class="summary-item"> Item 2 </div>
<div class="summary-item"> Item 3 </div>
<div class="summary-item"> Item 4 </div>
<div class="summary-item"> Item 5 </div>
<div class="summary-item"> Item 6 </div>
<div class="summary-item"> Item 7 </div>
<div class="summary-item"> Item 8 </div>
<div class="summary-item"> Item 9 </div>
<div class="summary-item"> Item 10 </div>
<div class="summary-item"> Item 11 </div>
</div>
</div>
</div>
</div>
</div>

Clear contents of outer div and add different number of inner divs

I want to change the number of inner divs from 2 to 3 but the javascript code isn't letting me. I want to get all the inner divs from the entire page and then add every three to the next inner div:
var innerElems = document.getElementsByClassName("inner");
var outerElems = document.getElementsByClassName("outer");
// Remove contents of outer divs
for (let i = 0; i < outerElems.length; i++) {
outerElems[i].innerHTML = "";
}
let x = 0;
for (let j = 0; j < innerElems.length; j++) {
outerElems[j].innerHTML = innerElems[x];
x++;
outerElems[j].innerHTML = innerElems[x];
x++;
outerElems[j].innerHTML = innerElems[x];
x++
}
<div class="outer" id="outer1ID">
<div class="inner">
<div class="anotherDiv">
Contents A
</div>
</div>
<div class="inner">
<div class="anotherDiv">
Contents B
</div>
</div>
</div>
<div class="outer" id="outer2ID">
<div class="inner">
<div class="anotherDiv">
Contents C
</div>
</div>
<div class="inner">
<div class="anotherDiv">
Contents D
</div>
</div>
</div>
<div class="outer" id="outer3ID">
<div class="inner">
<div class="anotherDiv">
Contents E
</div>
</div>
<div class="inner">
<div class="anotherDiv">
Contents F
</div>
</div>
</div>
I want the final result to look like:
<div class="outer" id="outer1ID">
<div class="inner">
<div class="anotherDiv">
Contents A
</div>
</div>
<div class="inner">
<div class="anotherDiv">
Contents B
</div>
</div>
<div class="inner">
<div class="anotherDiv">
Contents C
</div>
</div>
</div>
<div class="outer" id="outer2ID">
<div class="inner">
<div class="anotherDiv">
Contents D
</div>
</div>
<div class="inner">
<div class="anotherDiv">
Contents E
</div>
</div>
<div class="inner">
<div class="anotherDiv">
Contents F
</div>
</div>
</div>
When running the script, the HTML just shows "object HTMLelement" when adding to the outer divs

Considering that your inner divs will have the same content, you can use this approach to avoid unecessary changes in the DOM:
const $outer = document.getElementsByClassName('outer');
const $inner = document.querySelector('.inner');
function addInnerElement() {
for (const $el of $outer) {
$el.insertAdjacentElement('beforeend', $inner.cloneNode(true));
}
}
addInnerElement();

After removing the content of your outer element, you can create a loop that will iterate 3 times (you want 3 inner divs). In this loop, you can create a new div element with document.createElement('div').
You can now add the class inner with classList.add('inner').
After that, you can append the new inner div to the outer div with .appendChild(element);.
In the example below, I have added a little bit of CSS to differentiate the outer div(Purple) from the inner div(Cyan).
Here is an example of what you can do:
var outerElems = document.getElementsByClassName("outer");
// Remove contents of outer divs
for(let j = 0; j < outerElems.length; j++)
{
outerElems[j].innerHTML = "";
for(let i = 1; i < 4; i++)
{
var innerElems = document.createElement('div');
innerElems.style.background = "cyan";
innerElems.style.margin = "5px";
innerElems.innerText = "Inner Div " + i;
innerElems.classList.add('inner');
outerElems[j].appendChild(innerElems);;
}
}
.outer{
background-color: purple;
height: 100px;
margin: 5px;
padding: 5px;
}
.inner{
background-color: cyan;
height: 20px;
margin: 5px;
}
<div class="outer" id="outer1ID">
<div class="inner">
</div>
<div class="inner">
</div>
</div>
<div class="outer" id="outer2ID">
<div class="inner">
</div>
<div class="inner">
</div>
</div>
<div class="outer" id="outer3ID">
<div class="inner">
</div>
<div class="inner">
</div>
</div>

run code snippet to see that my solution works
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
.inner {
background-color: red;
margin: 0.5rem;
}
.outer {
background-color: blue
}
</style>
<body>
<div class="outer" id="outer1ID">
outer
<div class="inner">
inner
</div>
<div class="inner">
inner
</div>
</div>
<div class="outer" id="outer2ID">
outer
<div class="inner">
inner
</div>
<div class="inner">
inner
</div>
</div>
<div class="outer" id="outer3ID">
outer
<div class="inner">
inner
</div>
<div class="inner">
inner
</div>
</div>
<script>
var innerElems = document.getElementsByClassName("inner")
var outerElems = document.getElementsByClassName("outer")
var lastElement = outerElems[2]
for (let [i, el] of [...outerElems].entries()) { // loop over all the remaining outer elements
i !== 2 && el.append(lastElement.children[i].cloneNode(true)) // add inner elements from last outer element
}
// remove last one
lastElement.remove()
</script>
</body>
</html>

pure JS handling if content text length < 0 then hide

I tried to handling,
if content text length < 0
then set class match-name & divider style to display none.
it seem like not working with below code.
var newsMatchName = document.querySelectorAll(".match-name");
var newsMatchNameDivider = document.querySelectorAll(".divider");
for (var i = 0; i < newsMatchName.length; i++) {
if (newsMatchName[i].length < 0) {
console.log(newsMatchName[i].length)
for (var i = 0; i < elem.length; i++) {
newsMatchName[i].style.display = "none";
newsMatchNameDivider[i].style.display = "none"
}
}
}
<div class="news-content">
<div class="match-name"></div>
<div class="divider"></div>
<div class="title">Title Text</div>
<div class="footer">
<span class="author">Author</span>
<span class="spacer"></span>
<div class="timeline">
<span class="date">2021-04-01</span>
<span class="time">12:15</span>
</div>
</div>
</div>

I have corrected the code for you:
var newsMatchName = document.querySelectorAll(".match-name");
var newsMatchNameDivider = document.querySelectorAll(".divider");
for (var i = 0; i < newsMatchName.length; i++) {
if (newsMatchName[i].innerText.length <= 0) {
newsMatchName[i].style.display = "none";
newsMatchNameDivider[i].style.display = "none"
}
}
<div class="news-content">
<div class="match-name"></div>
<div class="divider"></div>
<div class="title">Title Text</div>
<div class="footer">
<span class="author">Author</span>
<span class="spacer"></span>
<div class="timeline">
<span class="date">2021-04-01</span>
<span class="time">12:15</span>
</div>
</div>
</div>

I test the length of the text in match-name
Length can be 0 or more, not <0, so use
newsMatchName[i].textContent.length === 0
but I suggest this:
var newsMatchName = document.querySelectorAll(".match-name");
var newsMatchNameDivider = document.querySelectorAll(".divider");
newsMatchName.forEach((name, i) => {
const textLen = name.textContent.trim().length;
name.classList.toggle("hide", textLen === 0);
newsMatchNameDivider[i].classList.toggle("hide", textLen === 0);
})
.hide {
display: none;
}
<div class="news-content">
<div class="match-name"></div>
<div class="divider">This will be hidden</div>
<div class="title">Title Text</div>
<div class="footer">
<span class="author">Author</span>
<span class="spacer"></span>
<div class="timeline">
<span class="date">2021-04-01</span>
<span class="time">12:15</span>
</div>
</div>
</div>

Trying to use javaScript to make the second image shows instead of the first

I'm trying to show the next image by just adding the style: display(none) but it is not working at all
<script>
function displayBanner() {
var count = 1;
if (count == 1) {
document.getElementById("banner_img3").style.display = "none";
}
}
displayBanner();
</script>
<header>
<div class="banner">
<div id="banner">
<div class="banner_img" id="banner_img1"></div>
<div class="banner_img" id="banner_img2"></div>
<div class="banner_img" id="banner_img3"></div>
</div>
</div>
</header>

Your element does not exist when you execute the script before the element. Move the script to after the elements or move displayBanner into a load event
I assume you want to rotate the images
var count = 0, max;
function displayBanner() {
document.getElementById("banner_img"+count).style.display = "none";
count++
if (count === max ) count = 0
document.getElementById("banner_img"+count).style.display = "block";
}
window.addEventListener("load", function() {
max = document.querySelectorAll(".banner_img").length;
document.getElementById("banner_img0").style.display = "block";
setInterval(displayBanner, 3000);
})
.banner_img { display:none; text-align:center }
<header>
<div class="banner">
<div id="banner">
<div class="banner_img" id="banner_img0"><img src="http://lorempixel.com/output/animals-q-c-640-480-1.jpg" /><br/>Image 1</div>
<div class="banner_img" id="banner_img1"><img src="http://lorempixel.com/output/animals-q-c-640-480-2.jpg" /><br/>Image 2</div>
<div class="banner_img" id="banner_img2"><img src="http://lorempixel.com/output/animals-q-c-640-480-3.jpg" /><br/>Image 3</div>
</div>
</div>
</header>

your div didn't have any source add a source using <img src=""></img> for the div try below code for that
<header>
<div class="banner">
<div id="banner">
<div class="banner_img" id="banner_img1"><img src="http://templatesforcv.com/wp-content/uploads/06.jpg" ></div>
<div class="banner_img" id="banner_img2"><img src="http://templatesforcv.com/wp-content/uploads/06.jpg"></div>
<div class="banner_img" id="banner_img3"><img src="http://templatesforcv.com/wp-content/uploads/06.jpg"></div>
</div>
</div>
</header>
window.onload=displayBanner();
function displayBanner() {
var count = 1;
if (count == 1) {
document.getElementById("banner_img3").style.display = "none";
}
}
working demo:https://jsfiddle.net/athulmathew/yh2esp1c/21/

Only show div if data attribute has less than a certain number

Given a number of divs, each with a data attribute of data-episode-count=, each one has a value based on the number of episodes in each container. I'm having trouble hiding a div with class show-more if the number of episodes in the currently selected container (which has the style of display: block) is less than 6. I'm not sure how to check the data-attribute value and if its less than 6, set the div style display to none for the show-more button. There are multiple seasons in the series-seasons-list-wrap class, but I have simplified it for the sake of this question to one.
HTML
<div class="series-seasons-list-wrap">
<div class="js-season-list-item" id="season-1" style="display: block;">
<div class="season-list" data-episode-count="22">
<div class="season-list__item">
<div class="episode-item">
<div class="episode-card js-episode-card">
<div class="episode-card__overlay"><span class="play-circle sm" data-play-path="/play/2603399"><svg class="svg svg-play"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/svg/svg-defs.svg#svg-play">svg-play</use></svg></span></div>
</div>
<div class="episode-details">
<h1 class="heading md hvy">Trick or Treat</h1>
<p></p>
<p class="runtime">22min</p>
</div>
</div>
</div>
<div class="season-list__item">
<div class="episode-item">
<div class="episode-card js-episode-card">
<div class="episode-card__overlay"><span class="play-circle sm" data-play-path="/play/2603400"><svg class="svg svg-play"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/svg/svg-defs.svg#svg-play">svg-play</use></svg></span></div>
</div>
<div class="episode-details">
<h1 class="heading md hvy">The New Man</h1>
<p></p>
<p class="runtime">22min</p>
</div>
</div>
</div>
<div class="season-list__item">
<div class="episode-item">
<div class="episode-card js-episode-card">
<div class="episode-card__overlay"><span class="play-circle sm" data-play-path="/play/2603401"><svg class="svg svg-play"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/svg/svg-defs.svg#svg-play">svg-play</use></svg></span></div>
</div>
<div class="episode-details">
<h1 class="heading md hvy">I'll Give You A Million</h1>
<p></p>
<p class="runtime">22min</p>
</div>
</div>
</div>
<div class="season-list__item">
<div class="episode-item">
<div class="episode-card js-episode-card">
<div class="episode-card__overlay"><span class="play-circle sm" data-play-path="/play/2603402"><svg class="svg svg-play"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/svg/svg-defs.svg#svg-play">svg-play</use></svg></span></div>
</div>
<div class="episode-details">
<h1 class="heading md hvy">Painkiller</h1>
<p></p>
<p class="runtime">22min</p>
</div>
</div>
</div>
<div class="season-list__item">
<div class="episode-item">
<div class="episode-card js-episode-card">
<div class="episode-card__overlay"><span class="play-circle sm" data-play-path="/play/2603403"><svg class="svg svg-play"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/svg/svg-defs.svg#svg-play">svg-play</use></svg></span></div>
</div>
<div class="episode-details">
<h1 class="heading md hvy">The Odds</h1>
<p></p>
<p class="runtime">22min</p>
</div>
</div>
</div>
<div class="season-list__item">
<div class="episode-item">
<div class="episode-card js-episode-card">
<div class="episode-card__overlay"><span class="play-circle sm" data-play-path="/play/2603404"><svg class="svg svg-play"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/svg/svg-defs.svg#svg-play">svg-play</use></svg></span></div>
</div>
<div class="episode-details">
<h1 class="heading md hvy">Mookie and Pookie</h1>
<p></p>
<p class="runtime">22min</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="show-more"><span class="js-show-more-trigger">Show
More</span></div>
The javascript:
const SeriesDetail = {
seasonItems: undefined,
keyContainer: undefined,
keyItems: undefined,
showMoreTrigger: undefined,
activeSeason: undefined,
bindEvents () {
this.keyContainer.addEventListener('click', (e) => {
const target = e.target
const number = (target.dataset && target.dataset.seasonNum) || 1
this.setSeason(number)
this.setHistory(number)
this.toggleShowMore()
})
this.showMoreTrigger.addEventListener('click', (e) => {
this.showMore()
})
},
init () {
this.showMoreTrigger = document.getElementsByClassName('js-show-more-trigger')[0]
this.keyContainer = document.getElementsByClassName('js-season-key-items')[0]
const keyItems = this.keyContainer.querySelectorAll('.js-season-key')
this.keyItems = [...keyItems]
const seasonItems = document.getElementsByClassName('js-season-list-item')
this.seasonItems = [...seasonItems]
const seasonNum = this.getQuery('season') || 1
this.setSeason(seasonNum)
this.bindEvents()
return this
},
setSeason (number) {
this.activeSeason = number
this.seasonItems.map(s => {
s.style.display = s.id === `season-${number}`
? 'block'
: 'none'
})
this.keyItems.map(i => {
if (i.id === `season-key-${number}`) {
i.classList.add('active')
} else {
i.classList.remove('active')
}
})
},
showMore () {
let seasons = document.getElementsByClassName('js-season-list-more')
seasons = [...seasons]
let season = seasons.find(s => {
const number = s.dataset.seasonNumber
return this.activeSeason === number
})
if (season) {
season.style.display = season.style.display === 'flex' ? 'none' : 'flex'
}
},
toggleShowMore() {
let showMore = document.getElementsByClassName("show-more")[0];
let seasonList = document.getElementsByClassName("season-list")
let episodeCount = [].slice.call( seasonList ).reduce((acc,val) => {
return acc + Number(val.getAttribute("data-episode-count")) }, 0)
for(let i = 0; i < document.getElementsByClassName("series-seasons-list-wrap").length; i++){
if(seasonList.getAttribute("data-episode-count") < 6){
showMore.style.display = 'none'
}
}
}
}
document.addEventListener('DOMContentLoaded', () => {
SeriesDetail.init()
})
Codepen: https://codepen.io/testermytesty/pen/wmdGZE?editors=1010

The issue you have is in your Javascript. In the line:
let episodeCount = seasonList.getAttribute("data-episode-count");
seasonList is an HTMLCollection. If you have only one and you want to get the desired attribute, you should do:
let episodeCount = seasonList[0].getAttribute("data-episode-count");
If it is more than one element in the seasonList Collection, then you can use:
let episodeCount = [].slice.call(seasonList).reduce((acc,val) => {
return acc + Number(val.getAttribute("data-episode-count"))
}, 0)

Develop Reference

JavaScript is the programming language of the Web.

Have an element react to another element change of state - javascript

Related

Re-increment class on children divs when parent div class changes

Clear contents of outer div and add different number of inner divs

pure JS handling if content text length < 0 then hide

Trying to use javaScript to make the second image shows instead of the first

Only show div if data attribute has less than a certain number

Categories

Resources