We Keep Coding

Why do I keep getting 4 slides when there are only 3 div elements?

I created a slideshow with 3 slides but for some reason, it keeps adding an additional slide
const slideshow = document.getElementById("slideshow");
const slides = slideshow.children;
let currentSlide = 0;
function goToSlide(n) {
slides[currentSlide].classList.remove("active");
currentSlide = (n + slides.length) % slides.length;
slides[currentSlide].classList.add("active");
updateSlideshowCounter();
}
function nextSlide() {
goToSlide(currentSlide + 1);
}
function prevSlide() {
goToSlide(currentSlide - 1);
}
function updateSlideshowCounter() {
const slideshowCounter = document.getElementById("slideshow-counter");
slideshowCounter.textContent = `${currentSlide + 1} / ${slides.length}`;
}
const prevButton = document.getElementById("prev-button");
prevButton.addEventListener("click", prevSlide);
const nextButton = document.getElementById("next-button");
nextButton.addEventListener("click", nextSlide);
updateSlideshowCounter();
#slideshow {
position: relative;
text-align: center;
width: 400px;
height: 300px;
border: 1px black solid;
}
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s;
}
.slide.active {
opacity: 1;
}
#slideshow-controls {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
}
#prev-button,
#next-button {
padding: 10px 20px;
border: none;
background-color: #333;
color: #fff;
cursor: pointer;
}
#prev-button {
margin-right: 20px;
}
#next-button {
margin-left: 20px;
}
#slideshow-counter {
margin: 0 20px;
}
<div id="slideshow">
<div class="slide">Slide 1</div>
<div class="slide">Slide 2</div>
<div class="slide">Slide 3</div>
<div id="slideshow-controls">
<button id="prev-button">Prev</button>
<span id="slideshow-counter"></span>
<button id="next-button">Next</button>
</div>
</div>
Can someone tell me what my mistake is and how I can get 3 slides in the output instead of 4.

You're defining your slides with the statement const slides = slideshow.children;. Your slideshow has a total of 4 direct children, so the counter is technically correct (see slide 1, slide 2, slide 3, and slideshow-controls).
One approach to get just the slides you want is to use const slides = document.getElementsByClassName("slide"). I hope this helps!

The problem is your slides variable is not assigned to the correct list of elements, as the previous answer said, you should replace slideshow.children with either document.getElementsByClassName('slide') or document.querySelectorAll('.slide'), use any of the two.
By using slideshow.children, you're not getting .slide classes, you're getting all children of #slideshow.
So, your variable in line 67, should be as the following:
const slides = document.querySelectorAll('.slide');
or
const slides = document.getElementsByClassName('.slide');

You should keep slideshow controls out of your slideshow div. I am attaching Code Below. Run it and check.
const slideshow = document.getElementById("slideshow");
const slides = slideshow.children;
let currentSlide = 0;
function goToSlide(n) {
slides[currentSlide].classList.remove("active");
currentSlide = (n + slides.length) % slides.length;
slides[currentSlide].classList.add("active");
updateSlideshowCounter();
}
function nextSlide() {
goToSlide(currentSlide + 1);
}
function prevSlide() {
goToSlide(currentSlide - 1);
}
function updateSlideshowCounter() {
const slideshowCounter = document.getElementById("slideshow-counter");
slideshowCounter.textContent = `${currentSlide + 1} / ${slides.length}`;
}
const prevButton = document.getElementById("prev-button");
prevButton.addEventListener("click", prevSlide);
const nextButton = document.getElementById("next-button");
nextButton.addEventListener("click", nextSlide);
updateSlideshowCounter();
#slideshowbox {
position: relative;
width: 400px;
height: 300px;
}
#slideshow {
position: relative;
text-align: center;
width: 400px;
height: 300px;
border: 1px black solid;
}
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s;
}
.slide.active {
opacity: 1;
}
#slideshow-controls {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
}
#prev-button,
#next-button {
padding: 10px 20px;
border: none;
background-color: #333;
color: #fff;
cursor: pointer;
}
#prev-button {
margin-right: 20px;
}
#next-button {
margin-left: 20px;
}
#slideshow-counter {
margin: 0 20px;
}
<div id="slideshowbox">
<div id="slideshow">
<div class="slide">Slide 1</div>
<div class="slide">Slide 2</div>
<div class="slide">Slide 3</div>
</div>
<div id="slideshow-controls">
<button id="prev-button">Prev</button>
<span id="slideshow-counter"></span>
<button id="next-button">Next</button>
</div>
</div>

Your slideshow div childs is throwing 4 because your 4th div is slideshow-controls. You may want to add -1 to the counter or redifine the way you make your div. Best of luck!

Javascript nth-of-type and data-attribute (change background images on hover links)

Somehow I can't get the following script to run.
The idea is to swap background images of a div, once the links with its corresponding data attributes are hovered. To be clear, both the links and the background images are listed separately.
Can someone help me with the solution??
Ps: Codepen example over here: https://codepen.io/eric-schakel/pen/qBXvgoM
!(function (t) {
class Bo {
constructor(t) {
const e = $$$(".capabilities__list a"),
i = $$(".capabilities__list");
e.forEach((t) => {
t.addEventListener("mouseover", function () {
const e = t.getAttribute("data-capability");
$$(".background__images img:nth-of-type(" + e + ")").classList.add("active");
}),
t.addEventListener("mouseout", function () {
const e = t.getAttribute("data-capability"),
i = $$(".background__images img:nth-of-type(" + e + ")");
i && i.classList.remove("active");
}),
t.addEventListener("click", function () {
window.capability = this.getAttribute("data-capability");
}),
i.addEventListener("mouseover", function () {
$$("#home__capabilities img.fill-background").classList.add("hidden");
}),
i.addEventListener("mouseout", function () {
const t = $$("#home__capabilities img.fill-background");
t && t.classList.remove("hidden");
});
});
}
}
});
#home__capabilities {
width: 100vw;
height: 60vh;
display: flex;
align-items: center;
}
img.fill-background {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
}
img.fill-background.hidden {
opacity: 0;
}
.capabilities__list {
font-size: 50px;
z-index: 10;
}
.capabilities__list a:hover {
opacity: .5;
}
.background__images {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size: cover;
z-index: 1;
}
.background__images img {
width: 100%;
height: 100%;
max-width: 100%;
object-fit: cover;
opacity: 0;
position: absolute;
top: 50%;
transform: translateY(-50%) translateZ(0) scale(1.01);
transform-origin: left center;
transition: opacity .2s ease-in-out,transform .4s ease;
}
.background__images img.active {
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="home__capabilities">
<img class="fill-background" src="https://images.unsplash.com/photo-1428606381429-22224991fb0c">
<div class="capabilities__list">
Link 01
Link 02
Link 03
Link 04
</div>
<div class="background__images">
<img src="https://images.unsplash.com/photo-1427830574887-32e5702033b0">
<img src="https://images.unsplash.com/photo-1427830180740-12146c79a1a3">
<img src="https://images.unsplash.com/photo-1415226181422-279a51ca056e">
<img src="https://images.unsplash.com/photo-1450885413713-176921f199b2">
</div>
</section>

Here
I changed a few things I would love to delegate more, but that would change your code too much.
Syntax error - script should end on }) and not ])
Instantiation of class was missing
Variable names and constants were not understandable
Missing helper functions for querySelector and querySelectorAll
!(function() {
class Bo {
constructor() {
const $$ = selector => document.querySelector(selector),
$$$ = selector => document.querySelectorAll(selector),
links = $$$(".capabilities__list a"),
list = $$(".capabilities__list");
links.forEach(link => {
link.addEventListener("mouseover", function() {
const capability = link.getAttribute("data-capability");
$$(".background__images img:nth-of-type(" + capability + ")").classList.add("active");
}),
link.addEventListener("mouseout", function() {
const capability = link.getAttribute("data-capability"),
image = $$(".background__images img:nth-of-type(" + capability + ")");
image && image.classList.remove("active");
}),
link.addEventListener("click", function() {
window.capability = this.getAttribute("data-capability");
}),
list.addEventListener("mouseover", function() {
$$("#home__capabilities img.fill-background").classList.add("hidden");
}),
list.addEventListener("mouseout", function() {
const image = $$("#home__capabilities img.fill-background");
image && image.classList.remove("hidden");
});
});
}
}
const list = new Bo()
})();
#home__capabilities {
width: 100vw;
height: 60vh;
display: flex;
align-items: center;
}
img.fill-background {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
}
img.fill-background.hidden {
opacity: 0;
}
.capabilities__list {
font-size: 50px;
z-index: 10;
}
.capabilities__list a:hover {
opacity: .5;
}
.background__images {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size: cover;
z-index: 1;
}
.background__images img {
width: 100%;
height: 100%;
max-width: 100%;
object-fit: cover;
opacity: 0;
position: absolute;
top: 50%;
transform: translateY(-50%) translateZ(0) scale(1.01);
transform-origin: left center;
transition: opacity .2s ease-in-out, transform .4s ease;
}
.background__images img.active {
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="home__capabilities">
<img class="fill-background" src="https://images.unsplash.com/photo-1428606381429-22224991fb0c">
<div class="capabilities__list">
Link 01
Link 02
Link 03
Link 04
</div>
<div class="background__images">
<img src="https://images.unsplash.com/photo-1427830574887-32e5702033b0">
<img src="https://images.unsplash.com/photo-1427830180740-12146c79a1a3">
<img src="https://images.unsplash.com/photo-1415226181422-279a51ca056e">
<img src="https://images.unsplash.com/photo-1450885413713-176921f199b2">
</div>
</section>

document.querySelectorAll does not work

I've just started to study javascript, and checked the example from the website https://cssanimation.rocks/clocks/. But, unfortunatelly, one part in js script does not work. The code is like this:
/*
* Starts any clocks using the user's local time
* From: cssanimation.rocks/clocks
*/
(function() {
// Initialise the locale-enabled clocks
//initInternationalClocks();
// Initialise any local time clocks
initLocalClocks();
// Start the seconds container moving
//moveSecondHands();
// Set the intial minute hand container transition, and then each subsequent step
//setUpMinuteHands();
})();
function initLocalClocks() {
//get the local time using javascript
var date = new Date();
var seconds = date.getSeconds();
var minutes = date.getMinutes();
var hours = date.getHours();
var hands = [
{
hand: "hours",
angle: (hours * 30) + (minutes/2)
},
{
hand: "minutes",
angle: (minutes * 6)
},
{
hand: "seconds",
angle: (seconds * 6)
},
];
for (var j = 0; j < hands.length; j++){
var elements = document.querySelectorAll('.' + hands[j].hand);
// window.alert(elements.length);
for (var k = 0; k < elements.length; k++)
{
// window.alert(elements[k]);
elements[k].style.webkitTransform = 'rotateZ(' + hands[j].angle + 'deg)';
elements[k].style.transform = 'rotateZ(' + hands[j].angle + 'deg)';
if (hands[j].hand === 'minutes'){
elements[k].parentNode.setAttribute('data-second-angle', hands[j+1].angle)
}
}
}
}
// Set a timeout for the first minute hand movement (less than 1 minute), then rotate it every minute after that
function setUpMinuteHands() {
// Find out how far into the minute we are
var containers = document.querySelectorAll('.minutes-container');
var secondAngle = containers[0].getAttribute("data-second-angle");
if (secondAngle > 0) {
// Set a timeout until the end of the current minute, to move the hand
var delay = (((360 - secondAngle) / 6) + 0.1) * 1000;
setTimeout(function() {
moveMinuteHands(containers);
}, delay);
}
}
.footer{
color: black;
font-style: italic;
position: fixed; bottom: 0; left:0; right: 0; height: 30px;
float: left;
clear: both;
}
.clock {
border-radius: 50%;
background: #fff url(./images/ios_clock.svg) no-repeat center;
background-size: 88%;
height: 20em;
padding-bottom: 0%;
position: relative;
width: 20em;
}
.clock::after{
background: #000;
border-radius: 50%;
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 5%;
height: 5%;
z-index: 10;
}
.minutes-container, .hours-container, .seconds-container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.hours {
background: #000;
height: 20%;
left: 48.75%;
position: absolute;
top: 30%;
transform-origin: 50% 100%;
width: 2.5%;
}
.minutes {
background: #000;
height: 40%;
left: 49%;
position: absolute;
top: 10%;
transform-origin: 50% 100%;
width: 2%;
}
.seconds {
background: #000;
height: 45%;
left: 49.5%;
position: absolute;
top: 14%;
transform-origin: 50% 100%;
width: 1%;
z-index: 8;
}
#keyframes rotate {
100% {
transform: rotateZ(360deg);
}
}
.hours-container{
animation: rotate 43200s infinite linear;
}
.minutes-container{
animation: rotate 3600s infinite linear;
}
.seconds-container {
animation: rotate 60s infinite linear;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="script.js" ></script>
</head>
<body>
<article class="clock">
<div class="hours-container">
<div class="hours"></div>
</div>
<div class="minutes-container">
<div class="minutes"></div>
</div>
<div class="seconds-container">
<div class="seconds"></div>
</div>
</article>
</body>
<footer>
<div class="footer">All materials are taken from the website cssanimation.rocks
</div>
</footer>
</html>
And when I open page, javascript is executed, but array "elements" from the line:
var elements = document.querySelectorAll('.' + hands[j].hand)
is empty. I've checked via alert windows, and really, querySelectorAll does not return objects, but name of css class seems to be correct... I've tried the same in console (like: document.querySelectorAll('.hands'), and it returns the needed div...
Could you, please, help me - what can be wrong with it?...
P.S. When I've pasted snippet to this post, the js script seems working... Now I'm completely lost - is it something with my browser settings, or something?
Thank you very much in advance for any suggestion/help!

Fixing the right button of a vanilla Javascript carousel

Against all reason, I'm trying to create a vanilla JavaScript carousel.
I am having two problems:
1. The images move left at widths of -680px as they should but when I tried to create the same function for the right button, the left value goes to 1370px making the picture off the screen.
2. I would like for it to slide left rather jump left (same for right), I managed to get it to do this but it doesn't work on the first slide, only from the second slide.
Here is the HTML code just for the carousel:
<div id = "container">
<div id = "carousel">
<div class = "slide"><img class = "slideImage" class = "active" src = "sithCover.png"></div>
<div class = "slide"><img class = "slideImage" src = "darthVader.png"></div>
<div class = "slide"><img class = "slideImage" src = "darthSidious.png"></div>
<div class = "slide"><img class = "slideImage" src = "kyloRen.png"></div>
</div>
</div>
<div id = "left" class = "button"></div>
<div id = "right" class = "button"></div>
Here is the CSS code:
#container {
position: absolute;
top: 200px;
left: 100px;
width: 680px;
height: 360px;
white-space: nowrap;
overflow:hidden;
}
#carousel {
position: absolute;
width: 2740px;
height: 360px;
white-space: nowrap;
overflow: hidden;
transition: left 300ms linear;
}
.slide {
display: inline-block;
height: 360px;
width: 680px;
padding: 0;
margin: 0;
transition: left 300ms linear;
}
.slideImage {
position:relative;
height: 360px;
width: 680px;
float: left;
}
.button {
position: absolute;
top: 340px;
height: 60px;
width: 60px;
border-bottom: 12px solid red;
}
#left {
left: 115px;
border-left: 12px solid red;
transform: rotate(45deg);
}
#right {
left: 693px;
border-right: 12px solid red;
transform: rotate(-45deg);
}
Here is the JavaScript:
var carousel = document.querySelector('#carousel');
var firstVal = 0;
document.querySelector('#left').addEventListener("click", moveLeft);
function moveLeft (){
firstVal +=685;
carousel.style.left = "-"+firstVal+"px";
};
document.querySelector('#right').addEventListener("click", moveRight);
function moveRight() {
firstVal +=685;
carousel.style.left = "+"+firstVal+"px";
};
Here is a JSFiddle so that you can see what I mean:
"https://jsfiddle.net/way81/8to1kkyj/"
I appreciate your time in reading my question and any help would be much appreciated.

Ofcourse it goes from -685px on left click and then to +1370pxthe next right click; You are always adding 685 to your firstVal variable.
firstVal = 0
//firstVal is worth 0
moveLeft()
//firstVal is now worth 685
moveRight()
//firstVal is now worth 1370.
The problem is that when you apply the firstVal to your CSS thing in the javascript, you create a string to get your negative value (where you apply the "-" sign infront of firstVal)
Instead, write them like this
function moveLeft (){
firstVal -=685; //note we now subtract, the "-" should appear when the number becomes negative
carousel.style.left = firstVal + "px";
};
function moveRight() {
firstVal +=685;
carousel.style.left = firstVal + "px";
};

var left = document.getElementById("left");
left.addEventListener("click", moveLeft, false);
var right = document.getElementById("right");
right.addEventListener("click", moveRight, false);
var carousel = document.getElementById("carousel");
var images = document.getElementsByTagName("img");
var position = 0;
var interval = 685;
var minPos = ("-" + interval) * images.length;
var maxPos = interval * images.length;
//slide image to the left side <--
function moveRight() {
if (position > (minPos + interval)) {
position -= interval;
carousel.style.left = position + "px";
}
if (position === (minPos + interval)) {
right.style.display = "none";
}
left.style.display = "block";
}
//slide image to the right side -->
function moveLeft() {
if (position < (maxPos - interval) && position < 0) {
position += interval;
carousel.style.left = position + "px";
}
if (position === 0) {
left.style.display = "none";
}
right.style.display = "block";
}
#container {
position: absolute;
top: 200px;
left: 100px;
width: 680px;
height: 360px;
white-space: nowrap;
overflow: hidden;
}
#carousel {
position: absolute;
width: 2740px;
height: 360px;
white-space: nowrap;
overflow: hidden;
transition: left 300ms linear;
}
.slide {
display: inline-block;
height: 360px;
width: 680px;
padding: 0;
margin: 0;
transition: left 300ms linear;
}
.slideImage {
position: relative;
height: 360px;
width: 680px;
float: left;
}
.button {
position: absolute;
top: 340px;
height: 60px;
width: 60px;
border-bottom: 12px solid red;
}
#left {
left: 115px;
border-left: 12px solid red;
transform: rotate(45deg);
display: none;
}
#right {
left: 693px;
border-right: 12px solid red;
transform: rotate(-45deg);
}
<div id="container">
<div id="carousel">
<div class="slide">
<img class="slideImage" class="active" src="sithCover.png" alt="slide1">
</div>
<div class="slide">
<img class="slideImage" src="darthVader.png" alt="slide2">
</div>
<div class="slide">
<img class="slideImage" src="darthSidious.png" alt="slide3">
</div>
<div class="slide">
<img class="slideImage" src="kyloRen.png" alt="slide4">
</div>
</div>
</div>
<div id="left" class="button"></div>
<div id="right" class="button"></div>

How to fade in smoothly

I want to fade in div by clicking menu buttons.
I implemented it anyway but when I switch the views very quickly, it sometimes flashes and the behavior is kind of rough or jumpy..or I don't know how to say..it's not smooth anyways.
https://jsfiddle.net/eLbze55d/12/
Any advice would be appreciated.
var m_menu = document.getElementById('m_menu');
var menu = document.getElementById('menu');
var m_staff = document.getElementById('m_staff');
var staff = document.getElementById('staff');
var m_access = document.getElementById('m_access');
var access = document.getElementById('access');
m_menu.addEventListener('click', function() {
menu.style.zIndex = 1;
staff.style.zIndex = 0;
access.style.zIndex = 0;
menu.style.webkitAnimationName = 'fadein';
menu.style.webkitAnimationDuration = "1000ms";
});
menu.addEventListener('webkitAnimationEnd', function() {
menu.style.opacity = 1;
staff.style.opacity = 0;
access.style.opacity = 0;
menu.style.webkitAnimationName = '';
});
m_staff.addEventListener('click', function() {
staff.style.zIndex = 1;
menu.style.zIndex = 0;
access.style.zIndex = 0;
staff.style.webkitAnimationName = 'fadein';
staff.style.webkitAnimationDuration = "1000ms";
});
staff.addEventListener('webkitAnimationEnd', function() {
staff.style.opacity = 1;
menu.style.opacity = 0;
access.style.opacity = 0;
staff.style.webkitAnimationName = '';
});
m_access.addEventListener('click', function() {
access.style.zIndex = 1;
menu.style.zIndex = 0;
staff.style.zIndex = 0;
access.style.webkitAnimationName = 'fadein';
access.style.webkitAnimationDuration = "1000ms";
});
access.addEventListener('webkitAnimationEnd', function() {
access.style.opacity = 1;
menu.style.opacity = 0;
staff.style.opacity = 0;
access.style.webkitAnimationName = '';
});
#-webkit-keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
html,body { height:100%; }
#main {
height:100%;
color: white;
}
.content{
font-size: 50pt;
}
#menu {
z-index: 1;
opacity: 1;
position: absolute;
top: 0;
left: 0;
background-image: url(https://snap-photos.s3.amazonaws.com/img-thumbs/960w/7B62IKGVF4.jpg);
height: 100%;
width: 100%;
}
#staff {
z-index: 0;
opacity: 0;
position: absolute;
top: 0;
left: 0;
background-image: url(https://snap-photos.s3.amazonaws.com/img-thumbs/960w/FRHYAEUPIN.jpg);
height: 100%;
width: 100%;
}
#access{
z-index: 0;
position: absolute;
top: 0;
left: 0;
background-image: url(https://snap-photos.s3.amazonaws.com/img-thumbs/960w/MGWWJDK49D.jpg);
height: 100%;
width: 100%;
}
#site_menu {
z-index: 2;
position: absolute;
bottom: 2%;
left: 3.5%;
font-size: 20pt;
display: flex;
justify-content: start;
}
#site_menu > div {
cursor: pointer;
margin: 20px;
display: flex;
align-items: center;
justify-content: start;
}
<div id="main">
<div id="menu" class="content">THIS IS MENU</div>
<div id="staff" class="content">THIS IS STAFF</div>
<div id="access" class="content">THIS IS ACCESS</div>
<div id="site_menu">
<div id="m_menu" class="menuelem">Menu</div>
<div id="m_staff" class="menuelem">Staff</div>
<div id="m_access" class="menuelem">Access</div>
</div>
</div>